如何將此方法附加到新添加的元素？

Question

那麼這種方法，當我把它連接到一個元素$('#swipeMe li').swipeDelete();工作正常，但是當我使用追加

$('.submitAsset').click(function(){ 
    var asset = $('#asset_number').val(); 
    $('.accounts #swipeMe').append('<li data-swipeurl="#"><a href="#">' + asset + '</a></li>'); 
    $(this).swipeDelete(); 
    $('#assetForm').slideUp();  
}); 

新列表項它不生效。我如何正確附加這個插件，以便添加到列表中的項目也具有滑動刪除？謝謝。

迄今沒有任何答案奏效。我必須解釋錯誤。這裏是我的html：

<div class="accounts"> 
<h2>CC Acounts </h2> 
<div id="CreditCards"> 
     <ul id="swipeMe"> 
      <li ><a href="#">This works</a></li> 
      <li data-swipeurl="#"><a href="#">This works<</a></li> 
      <li data-swipeurl="#"><a href="#">This works<</a></li> 
      <li data-swipeurl="#"><a href="#">This works<</a></li> 
      <li data-swipeurl="#"><a href="#">This works<</a></li> 
      <li data-swipeurl="#"><a href="#">This works<</a></li> 
      <li data-swipeurl="#"><a href="#">This works<</a></li>     
      <li >This doesn't</li>  
     </ul> 
</div> 

而且JS：

 $('#swipeMe li').swipeDelete(); 

    $('#swipeMe li').on('click', function(){ 
    $(this).trigger('swiperight') 
     }); 

再次在所有的HTML工作中的添加元素很好，但沒有附加的有swipeDelete功能。

這裏是整個插件：

/* 
Name: jquery.swipeButton.js 
Author: Andy andyMatthews 
Website: http://andyMatthews.net 
Version: 1.2.1 
*/ 
(function($){ 

$.fn.swipeDelete = function(o){ 

    o = $.extend({}, $.fn.swipeDelete.defaults, o); 

    return this.filter('[data-swipeurl]').each(function(i, el){ 
     var $e = $(el); 
     var $parent = $(el).parent('ul'); 

     $e.on(o.direction, function (e) { 

      // reference the current item 
      var $li = $(this); 
      var cnt = $('.ui-btn', $li).length; 

      // remove all currently displayed buttons 
      $('div.ui-btn, .' + o.btnClass, $parent).animate({ width: 'toggle' }, 200, function(e) { 
       $(this).remove(); 
      }); 

      // if there's an existing button we simply delete it, then stop 
      if (!cnt) { 
       // create button 
       var $swipeBtn = $('<a>' + o.btnLabel + '</a>').attr({ 
            'data-role': 'button', 
            'data-mini': true, 
            'data-inline': 'true', 
            'class': (o.btnClass === 'aSwipeBtn') ? o.btnClass : o.btnClass + ' aSwipeBtn', 
            'data-theme': o.btnTheme, 
            'href': $li.data('swipeurl') 
           }) 
           .on('click tap', o.click); 

       // slide insert button into list item 
       $swipeBtn.prependTo($li).button(); 
       $li.find('.ui-btn').hide().animate({ width: 'toggle' }, 200); 

       // override row click 
       $('div a:not(' + o.btnClass + ')', $li).on('click.swipe', function(e){ 
        e.stopPropagation(); 
        e.preventDefault(); 
        $(this).off('click.swipe'); 
        $li.removeClass('ui-btn-active').find('div.ui-btn').remove(); 
       }); 

      } 


     }); 

    }); 
}; 

$.fn.swipeDelete.defaults = { 
    direction: 'swiperight', 
    btnLabel: 'niko', 
    btnTheme: 'e', 
    btnClass: 'aSwipeBtn', 
    click: function(e){ 
     e.preventDefault(); 
     $(this).parents('li').slideUp(); 
    } 
}; 

}(jQuery)); 

Answer 1

在您click()處理this是點擊的項目，所以$(this).swipeDelete();是應用該方法的.submitAsset元素，而不是新添加的li元素。要調用.swipeDelete()爲要附加的項目做到這一點：

$('.submitAsset').click(function(){ 
    var asset = $('#asset_number').val(); 
    $('<li data-swipeurl="#"><a href="#">' + asset + '</a></li>') 
     .appendTo('#swipeMe').swipeDelete(); 
    $('#assetForm').slideUp();  
}); 

不是第一選擇#swipeMe元素，並使用.append()，我已經改變了它周圍的首先創建新的li元素，然後.appendTo()，因爲這樣你有一個新的元素的參考，並可以調用.swipeDelete()就可以了。

請注意，您可以將您'.accounts #swipeMe'選擇可能會改變，只是'#swipeMe'，因爲應該只有一個與id元素（除非你想要的代碼沒有任何效果，除非該元素是.accounts元素中）。

Answer 2

您需要定位新創建的元素。您正在努力的目標this這是你對clciked元素觸發新元素的創建

替換：

$(this).swipeDelete(); 

與

$('#swipeMe li').last().swipeDelete();