如何将此方法附加到新附加的元素

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();    
});

它不会生效。 如何正确附加此插件，以便添加到列表中的项目也具有滑动删除功能？ 谢谢。

到目前为止，没有一个答案奏效。 我一定解释错了。 这是我的网页：

<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 中所有添加的元素都运行良好，但附加的元素都没有滑动删除功能。

这是整个插件：

/*
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哪个元素是您所选择的触发新元素创建的元素

取代：

$(this).swipeDelete();

跟

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