将事件处理程序附加到动态元素

Question

首先，我有一些可以拖放的小部件，它们也是可排序的。每个小部件都有一个删除按钮。我想要实现的是，其中一个小部件有一个添加按钮。每当我点击添加新部件按钮时，我想克隆第一个部件，并在列表的底部添加。到目前为止，它是有效的。我能够克隆小部件，但我使用克隆(true)，它允许关闭按钮的功能完美克隆关闭按钮。问题是我不能拖放克隆的项目。我错过了什么?

提前谢谢你。

谢谢你的回复。但这对我不起作用

下面是部分代码;

 makeSortable : function () {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings,
        $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');

这是我在网上找到的一个现成的代码。

当我第一次在浏览器上查看它时，我可以看到6个小部件。我想克隆其中任何一个并动态添加。

谢谢

Answer 1

它们可能缺少适当的事件处理程序。当您最初为小部件绑定事件处理程序时，您可能在选择的小部件上使用了mousedown()等。然而，这只会绑定那些jQuery在执行语句时发现的小部件。

如果您希望动态创建的对象也被绑定，您需要使用live()来绑定事件。

所以不用

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

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