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はクリックされたアイテムがあるため、新しく追加された li 要素ではなく$(this).swipeDelete();、要素にメソッドを適用します。追加するアイテム.submitAssetを呼び出すには、次のようにします。.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 を持つ要素は 1 つだけである必要があるためです (その要素が要素内にない限り、コードが効果を持たないようにしたい場合を除きます.accounts)。

于 2012-12-17T01:51:43.857 に答える
1

新しく作成された要素をターゲットにする必要があります。this新しい要素の作成をトリガーする、クリックした要素をターゲットにしようとしています

交換：

$(this).swipeDelete();

と

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