开发者

Attaching event handler to dynamic elements

First I have some widgets which I can drag drop and they are also sortable. And every widget has a delete button. What I would like to achieve is that, one of the widget has a add button. When ever I click that add new widget button, I would like to clone first widget as it is and add at the bottom of the list. So far it works. I am able to clone the widget but I use clone(true) which allows the close button to function perfect for cloned close button. The problem is that I cannot drag and drop the cloned items. What am I missing?

Thank you in advance.

Thank you for your reply. But It didnt work for me.

Here is a part of the code;

 makeSortable : function () {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings,

    开发者_Python百科    $sortableItems = (function () {
            var notSortable = '';
            $(settings.widgetSelector,$(settings.columns)).each(function (i) {
                if (!iNettuts.getWidgetSettings(this.id).movable) {
                    if(!this.id) {
                        this.id = 'widget-no-id-' + i;  
                    }
                    notSortable += '#' + this.id + ',';

                }



            });

            var result = $('> li:not(' + notSortable + ')', settings.columns);


            return result;
        })();

    $sortableItems.find(settings.handleSelector).css({
        cursor: 'move'
    }).mousedown(function (e) {

        $sortableItems.css({width:''});
        $(this).parent().css({
            width: $(this).parent().width() + 'px'
        });

    }).mouseup(function () {
        if(!$(this).parent().hasClass('dragging')) {
            $(this).parent().css({width:''});



        } else {
            $(settings.columns).sortable('disable');
        }
    });

    $(settings.columns).sortable({
        items: $sortableItems,
        connectWith: $(settings.columns),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,
        delay: 100,
        opacity: 0.8,
        containment: 'document',
        start: function (e,ui) {
            $(ui.helper).addClass('dragging'); 



        },
        stop: function (e,ui) {
            $(ui.item).css({width:''}).removeClass('dragging');
           $(settings.columns).sortable('enable');

This is one of ready made code which I found on the internet.

When first time I view it on the browser I can see 6 widgets. I would like to clone any of them and add dynamically.

thank you


They are likely missing the proper event handlers. When you bound the event handlers for the widgets initially, you probably used a mousedown(), etc on a selection of the widgets. However this will only bind those widgets that jQuery found when the statement was executed.

If you want dynamically created objects to also be bound, you need to use live() to bind the events.

So instead of

$('.widget').mousedown(function(){...});`

Do

$('.widget').live("mousedown", function(){...});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜