JQuery Mobile swiperight事件触发了之前触发的listview元素

时间:2015-04-16 18:06:18

标签: jquery listview jquery-mobile swipe

我试图使用' swiperight'删除listview项目的事件,但似乎该事件也将针对先前触发的元素触发。我一直在努力尝试调试并弄清楚它是否是一个范围或冒泡问题,但我确实不知道。

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%"});
    });
}

非常感谢你们。

1 个答案:

答案 0 :(得分: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%"});
    });

});