Question

我正在编写一个phonegap / jquery移动应用程序，我正在使用swipeButton插件来模拟滑动以删除操作（https://github.com/commadelimited/jquery.swipeButton.js）。

但是，我很难将插件功能附加到附加的li。

有人能指出我正确的方向吗？

继承我的代码：

$('#recordings-list').append('<li data-corners="false" data-shadow="false" data-iconshadow="true" data-icon="arrow-r" data-iconpos="right" class="ui-btn-icon-right ui-li-has-arrow"><a href="#view" class="ui-link-inherit" data-transition="slidefade">'
    + '<p class="ui-li-aside"><strong>' + resultString + '</strong> <br/> <span class="sync-label">' + syncStatus + '</span></p>'
    + '<h3 class="ui-li-heading">' + results.rows.item(i).name + '</h3>'
    + '<p class="ui-li-desc"><strong>' + results.rows.item(i).notes + '</strong></p>'
    + '<p class="ui-li-desc"> ' + results.rows.item(i).description + '</p>'
    + '</a></li>').swipeDelete({
                direction: 'swiperight', // standard jquery mobile event name
                btnLabel: 'Delete',
                btnTheme: 'b',
                btnClass: 'aSwipeBtn',
                click: function(e){
                    e.preventDefault();
                    alert("Swipey McSwipeo");
                }
            });

Answer 1

目前，您要将插件附加到$('#recordings-list')，而不是附加的<li> 你应该这样做：

var $li = $('<li data-corners="false" data-shadow="false" data-iconshadow="true" data-icon="arrow-r" data-iconpos="right" class="ui-btn-icon-right ui-li-has-arrow"><a href="#view" class="ui-link-inherit" data-transition="slidefade">'
    + '<p class="ui-li-aside"><strong>' + resultString + '</strong> <br/> <span class="sync-label">' + syncStatus + '</span></p>'
    + '<h3 class="ui-li-heading">' + results.rows.item(i).name + '</h3>'
    + '<p class="ui-li-desc"><strong>' + results.rows.item(i).notes + '</strong></p>'
    + '<p class="ui-li-desc"> ' + results.rows.item(i).description + '</p>'
    + '</a></li>');

$('#recordings-list').append($li);
$li.swipeDelete({
                direction: 'swiperight', // standard jquery mobile event name
                btnLabel: 'Delete',
                btnTheme: 'b',
                btnClass: 'aSwipeBtn',
                click: function(e){
                    e.preventDefault();
                    alert("Swipey McSwipeo");
                }
            });

Answer 2

您的代码无效的原因是将swipeDelete链接到append将调用要附加到的选择器上的函数，而不是要追加的新元素。

您可以向链中添加一个遍历方法，例如.children('li:last')，以将您刚刚追加的字符串定位为一个元素

$('#recordings-list').append('<li>....</li>').children('li:last').swipeDelete()

作为在一个链中定位各种不同元素的示例，请考虑以下内容：

$(selector).addClass('foo')/* method returns original selector*/
           .parent().css('color','red')/* method returns parent element original selector*/
           .find('p:first').text('test') /*first "p" tag in parent of original selector*/
           .hide() /* still returns first "p" tag" */
           .fadeIn();

将插件函数添加到附加的LI

2 个答案: