Question

我正在尝试使用事件委派将项目添加到可以使用click事件的DOM，但它可以工作，但是它会在第二次单击时触发事件两次。

控制台输出：

25-06-2015
Object {option: "2", date: "25-06-2015", callback: "dialog"}
26-06-2015
Object {option: "2", date: "25-06-2015", callback: "dialog"}
Object {option: "2", date: "26-06-2015", callback: "dialog"}

码：

$(document).on("click", ".action", function(e){
    var target = $(this).data("target");

    console.log(target);

    var dialog = $('#dialog');

    dialog.find(".form-errors").html('');
    dialog.show();

    dialog.find('form').submit(function(e){
        e.preventDefault();

        var params = {
            'option': $(this).find('#option').val(),
            'target': target,
            'callback': 'dialog'
        };

        console.log(params);

        // call backend
        API(action, params)
    });

});

我尝试添加此行，但它无法解决我的问题

$(document).on("click", ".action", function(e){
    e.stopImmediatePropagation();
    ...

新输出（仔细观察，它会发送旧日期两次）：

25-06-2015
Object {option: "2", date: "25-06-2015", callback: "dialog"}
26-06-2015
Object {option: "2", date: "25-06-2015", callback: "dialog"}

Answer 1

每当您点击以下语句的action元素时，就会将事件与元素dialog绑定在一起，因此每次点击都会为元素附加新的submit。

dialog.find('form').submit(function(e){

您需要使用.off()删除以前的事件处理程序。所以使用以下语句：

dialog.find('form').off('submit').submit(function(e){

Answer 2

原因是你已经将事件绑定了两次。

Solution 1: try to put e.preventDefault(); and return false;
Solution 2: try unbinding the event 
$(".action").unbind('click'); 

(or)

$(document).off('click', '.action');

委托点击事件会导致事件触发两次

2 个答案: