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

首先，我有一些小部件，我可以拖放它们也可排序。每个小部件都有一个删除按钮。我想实现的是，其中一个小部件有一个添加按钮。当我点击添加新的窗口小部件按钮时，我想克隆第一个窗口小部件，并添加到列表底部。到目前为止它的工作。我能够克隆小部件，但我使用克隆（真），它允许关闭按钮完美克隆关闭按钮。问题是我不能拖放克隆的项目。我错过了什么？将事件处理程序附加到动态元素

预先感谢您。

谢谢您的回复。但它不适合我。

这是代码的一部分;

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个小部件。我想克隆它们中的任何一个并动态添加。

谢谢

来源

2011-08-03 akd

他们很可能错过了正确的事件处理程序。当您最初为小部件绑定事件处理程序时，您可能在选定的小部件上使用了mousedown()等。但是，这只会绑定jQuery在执行语句时找到的那些小部件。

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

所以不是

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

做

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

来源

2011-08-03 01:32:38 tskuzzy

感谢您的答复。但它没有工作。我意识到的是，当我更改jquery的版本时，它可以工作，但是可拖动的小部件在我删除小部件时表现异常。它的宽度尺寸增加了一倍。但是也可以拖放克隆的。这可能是什么原因？ – akd

Live是一种只用于旧版jQuery中的方法，不支持新版本。尝试用“在”或“委托”替换现场。 – Saiesh

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

回答

相关问题