jQuery - 單擊事件多次觸發

我在ASP.NET MVC模式窗口中遇到了一個奇怪的問題。我創建了一個負責顯示模式窗口的鏈接。模態窗口顯示幷包含一個按鈕 - 保存按鈕。我將一個單擊事件處理程序附加到此按鈕以保存窗口的內容，然後關閉它。整個mechanizm看起來是這樣jQuery - 單擊事件多次觸發

// this link shows up a modal window 
@Html.ActionLink("Add", "Add", "Index", null, new { id = "actionLinkAdd" }); 
and javaScript 
$(function() { 
     debugger; 
     $("#actionLinkAdd").on("click", function (event, action) { // attaching to click event 
      debugger; 
      event.preventDefault(); //disabling default handler 
      var $dialog = $('<div></div>'); 
      var $url = $(this).attr('href'); 
      $dialog.empty(); 
      var $kendoWindow = $dialog.kendoWindow({ //window creating 
       height: "200px", 
       title: "Dodaj", 
       visible: false, 
       width: "200px", 
       actions: ["Close"], 
       content: $url // loading of the window's content (partialView) 

      }).data("kendoWindow"); 
      $kendoWindow.center(); 
      $kendoWindow.open(); 

      function onButtonSaveClick(event) { 
       debugger; 
       event.preventDefault(); 
       var $url = $('#target').attr("action"); 
       $.ajax({ 
        url: $url, 
        type: "POST", 
        data: $('#target').serialize(), 
        success: function (response) { 
         $("#btnSave").unbind("click"); 
         $kendoWindow.close(); 
         $kendoWindow.destroy(); 
        }, 
        error: function (args) { 
         debugger; 
         $("#btnSave").unbind("click"); 
         $kendoWindow.content(args.responseText);     
        } 
       }); 
      } 
      $('#btnSave').live("click", onButtonSaveClick); // attaching to click event on  save button in the modal window 
     }); 
    });

一切工作幾乎大帝。問題是，功能onButtonClick（）被觸發幾次。例如，如果我打開兩次模式窗口，這個函數也會被調用兩次。這對我來說很奇怪，因爲我關閉模式窗口，銷燬它，甚至解除所有連接到btnSave的點擊事件（我也嘗試使用on和off函數，但窗口的行爲是相同的）。什麼可能是這種行爲的原因？

來源

2012-02-04 John

我覺得事件泡泡是你的問題，什麼btnSave是它的div或href – kobe 2012-02-04 20:02:07

閱讀此鏈接，它應該解決問題http://stackoverflow.com/questions/1536660/jquery-click-event-handler-is-被稱爲兩次爲複選框 – kobe 2012-02-04 20:06:46

@kobe其輸入 – John 2012-02-04 20:17:35

甚至更好移動結合該事件的行：

 } 
     $('#btnSave').live("click", onButtonSaveClick); 
    }); 
});

下移一行這樣的：

 } 
    }); 
    $('#btnSave').live("click", onButtonSaveClick); 
});

的問題是，你每當你創建一個新的對話框時，你都會直接打電話給你試圖使用'unbind'來解除綁定。但是你不需要，你只需要在頁面準備好時調用的最外層函數中使用live來綁定一次，然後它會接收任何id ='btnSave'的任何點擊。現在你不應該真的創建多個對話框窗口與他們在相同的ID元素，你應該真的把類設置爲'btnSave'，但這是另一回事..

來源

2012-02-04 20:29:37

作品像一個魅力。非常感謝:) – John 2012-02-04 20:41:10

至unbind a live事件處理程序使用die方法。嘗試這個。

$("#btnSave").die("click");

.die()參考：http://api.jquery.com/die/

來源

2012-02-04 20:23:14 ShankarSangoli

我發現，爲了驗證模態窗口，我包括模態對話框捆綁這樣的：

@Scripts.Render("~/bundles/jqueryval")

我這樣做是因爲，當驗證束只加載父頁上驗證失敗。

我jqueryval包包括三個文件：

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.unobtrusive*", // references two jquery libraries 
         "~/Scripts/jquery.validate*"));

我發現，包括這個包是導致多次燒結問題，大概是因爲庫加載每個模式對話框被調用時，並保留在內存中。當我刪除捆綁包時，問題消失了，但驗證也未能發生。

經過大量的實驗，我終於找到了解決辦法;拆分捆綁包，將兩個jQuery庫移動到父頁面，將第三個移動到模型對話框。具體...

這兩個父頁上：

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
<script src="~/Scripts/jquery.validate.min.js"></script>

而這一次的模態對話框：

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

隨着包括分離，我有多次點火沒有更多的問題並保留驗證。

來源

2013-01-16 22:05:50 spadelives

你的答案很混亂......它的寫法就好像你是OP ...如果是這樣，它不是同一個用戶帳戶。 – Sparky 2013-01-16 23:58:18

jQuery - 單擊事件多次觸發

回答

相關問題