將事件處理程序附加到動態元素

首先，我有一些小部件，我可以拖放它們也可排序。每個小部件都有一個刪除按鈕。我想實現的是，其中一個小部件有一個添加按鈕。當我點擊添加新的窗口小部件按鈕時，我想克隆第一個窗口小部件，並添加到列表底部。到目前爲止它的工作。我能夠克隆小部件，但我使用克隆（真），它允許關閉按鈕完美克隆關閉按鈕。問題是我不能拖放克隆的項目。我錯過了什麼？將事件處理程序附加到動態元素

預先感謝您。

謝謝您的回覆。但它不適合我。

這是代碼的一部分;

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

將事件處理程序附加到動態元素

回答

相關問題