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，这是您抓住的元素，触发了新元素的创建

替换：

$(this).swipeDelete();

使用

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

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

2 个答案: