委派單擊事件會導致事件觸發兩次

我嘗試使用事件委託向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(); 
    ...

NE W輸出（密切關注，它會將舊兩次日期）：

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

來源

2015-06-23 Bea Trix

用'dialog.find（ '形式'）嘗試過（ '提交'）提交（函數（E）{'。 – Satpal

因此，每次點擊'.action'，你就會綁定到表單提交？當然，你只需要這樣做一次 – CodingIntrigue

每當你點擊下面的語句action元素綁定事件與元素dialog，所以每點擊新submit附有的元素。

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

您需要使用.off()刪除以前的事件處理程序。因此，使用下面的語句：

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

來源

2015-06-23 07:42:46 Satpal

感謝這似乎工作！ –

的原因是你已經綁定的情況下的兩倍。

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

(or) 

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

來源

2015-06-23 07:42:39

//#index --Fyi---page link 
$(document).on('pagebeforeshow', '#index', function(){  
$(document).off('click', '.action').on('click', '.action',function(e) { 
      alert('Button click'); 
     }); 
    });

看這個thread

來源

2015-06-23 07:48:12

委派單擊事件會導致事件觸發兩次

回答

相關問題