JQuery Mobile swiperight 事件触发先前触发的列表视图元素答案

【问题标题】：JQuery Mobile swiperight event fires previously fired listview elementsJQuery Mobile swiperight 事件触发先前触发的列表视图元素
【发布时间】：2015-06-23 07:56:18
【问题描述】：

我正在尝试使用 'swiperight' 事件来删除列表视图项，但似乎该事件也会针对先前触发的元素触发。我已经为此苦苦挣扎了一段时间，试图调试并弄清楚它是范围问题还是冒泡问题，但我真的不知道。

here is a gif to illustrate the problem

代码如下：

var $task;

$("#todolist").on("swiperight", ">li", function() {
    $task = $(this);
    $task.animate({left: "30%"}, confirmAndDelete($task));
});

function confirmAndDelete($task) {
    $("#confirm").popup("open");
    $("#confirm #yes").on("tap", function() {
        $task.animate({left: "70%"}, function() {
            $task.remove();
        });
    });
    $("#confirm #cancel").on("tap", function() {
        $task.animate({left: "-=30%"});
    });
}

非常感谢各位。

【问题讨论】：

标签： jquery listview jquery-mobile swipe

【解决方案1】：

问题是您每次都向 yes 和 cancel 按钮添加新的点击处理程序，因此要么添加一个 off() 以删除以前的处理程序，要么只在 confirmAndDelete 之外创建一次：

var $task;

$(document).on("pagecreate","#page1", function(){ 

    $("#todolist").on("swiperight", ">li", function() {
        $task = $(this);
        $task.animate({left: "30%"}, function(){
            $("#confirm").popup("open");
        });
    });

    $("#confirm #yes").on("tap", function() {
        $task.animate({left: "70%"}, function() {
            $task.remove();
        });
    });
    $("#confirm #cancel").on("tap", function(e) {
        $task.animate({left: "-=30%"});
    });

});

【讨论】：