1

我想在这里看到常见的移动滑动删除功能http://andymatthews.net/code/swipebutton/ 我下载了源代码，并从中删除了我自己的版本。它工作正常，这是我的 html：

<div class="accounts">    
<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 >This works too</li>        
            </ul>

</div>
</div>

而不是这里是我的 html，它接受信用卡信息以添加到列表中：

  <div class= "addCC">        
        <div data-role="fieldcontain">
          <form id ="ccForm">
            <input type="password" name="credit_card_number" id="credit_card_number" value="" placeholder="Credit Card Number">
            <input type="password" name="security_code" id="security_code" value="" placeholder="Security Code">
            <input type="date" name="expiration_date" id="expiration_date" value="" placeholder="Expiration Date">
            <input type="password" name="name" id="name" value="" placeholder="Name On Card">
            <input type="password" name="street_address" id="street_address" value="" placeholder="Street Address">
            <input type="text" name="city" id="city" value="" placeholder="City">
            <input type="number" name="zip_code" id="zip_code" value="" placeholder="Zip Code">

            <button type="button" class="submitCC" name="submit" value="submit">Submit</button>
          </form>
        </div>
</div>

这是我的 JS，它将新信用卡附加到现有列表中： 

$(document).ready(function() {
$('.submitCC').click(function(){
    var creditcard = $('#credit_card_number').val();
    $('.accounts  #swipeMe').append('<li><a href="#">' + creditcard + '</a></li>');
    $('#ccForm').slideUp();

});

这是插件所涉及的JS：

        $(document).ready(function() {

        // attach the plugin to an element
        $('#swipeMe li').swipeDelete({
            btnTheme: 'e',
            btnLabel: 'deleteniko',
            btnClass: 'aSwipeButton',
            click: function(e){
                e.preventDefault();
                var url = $(e.target).attr('href');
                $(this).parents('li').slideUp();
                $.post(url, function(data) {
                    //console.log(data);
                });
            }
        });

        $('#swipeMe li:nth-child(n)').on('click', function(){
            $(this).trigger('swiperight')
        });

    });

最后是整个插件：

(function($){

$.fn.swipeDelete = function(o){

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

    return this.filter('#swipeMe li').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).unbind('click.swipe');
                    $li.removeClass('ui-btn-active').find('div.ui-btn').remove();
                });


            }

        });

    });
};



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

}

我为所有的代码道歉。它附加得很好，并且删除在 html 元素上效果很好，但是任何新附加的列表项都没有删除功能。任何想法为什么？

4

0 回答 0