0

因此，当我将它附加到元素时，此方法$('#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));
4

2 回答 2

3

在您的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'选择器更改为 just '#swipeMe'，因为应该只有一个具有该 id 的元素（除非您希望代码无效，除非该元素在一个.accounts元素中）。

于 2012-12-17T01:51:43.857 回答
1

您将需要定位新创建的元素。您正在尝试定位this哪个元素是您点击的触发新元素创建的元素

代替：

$(this).swipeDelete();

和

$('#swipeMe li').last().swipeDelete();
于 2012-12-17T01:53:02.680 回答