0

我正在编写一个 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");
                }
            });
4

2 回答 2

0

目前，您将插件附加到$('#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");
                }
            });
于 2012-11-14T12:27:49.030 回答
0

您的代码不起作用的原因是链接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();
于 2012-11-14T12:32:56.827 回答