jQuery事件多次觸發

我遇到了jQuery事件的問題。jQuery事件多次觸發

首先讓我解釋一下頁面設置：

主要-page.php文件中包括了：

一）頭（其中標誌是）

B）一個導航欄（其中，各種選擇是）

c）一種動態內容區域（當點擊的元素對導航欄的內容將被加載）

d）頁腳

可以說，導航條由|首頁|信息|關於我們| ...

HOME的內容是一個單獨的PHP文件，具有單獨的CSS和JS文件。所有選擇都是一樣的。

只要我選擇HOME（例如），我從動態內容區域刪除任何內容，並使用AJAX放置HOME的內容。與此同時，我刪除了與之前內容相關的任何CSS/JS文件，並且我鏈接了與加載的CSS/JS文件相關聯的文件。這部分工作完美。

現在，如果我從一個選擇切換到其他選擇（可以說，從首頁 - >消息 - >關於我們，然後回到主頁），如果我點擊一個按鈕在家裏，它會觸發多個事件倍。如果該事件導致對服務器的AJAX調用，則情況會更糟糕（想象一下調用服務器5次而不是1次）。

**我在無線電元素類的元素上使用on（）事件的原因是因爲是未來的DOM元素。最初這個元素不在頁面上。

的JS代碼示例：

$(document).on('click', '.radio-element', function(){ 

    $.ajax({ 

      url: "js/ajax/ajaxcall.php", 
      success: function(output){ 

       $('#ajaxcall-container').html(output); 

      }    
    }); 

});

我做什麼，我只要一點擊一個元素與類無線電元件的，我走在服務器和我取AjaxCall的輸出。 PHP腳本。

看到INSPECT ELEMENT中的NETWORK標籤，我發現click事件多次執行AJAX調用。有些時候2，其他3個甚至5

我做了什麼來解決這個問題（其中非正常工作100％）：

A），使用「關」

結合之前解除綁定事件

$(document).off('click','.radio-element').on('click', '.radio-element', function(){ .... });

B）使用事件。 stopImmediatePropagation（）

$(document).on('click', '.radio-element', function(event){ 

    event.stopImmediatePropagation(); 

    //rest of code 

});

下面是因爲我的一篇文章，它不會停止事件綁定過程中，它只是防止多個事件執行在讀我還沒有嘗試過的解決方案（不知道如果這會導致其他問題）。

$(document).on('click', '.radio-element', function(event){ 

    if(event.handled !== true) 
    { 
     //Code goes here 
     event.handled = true; 
    } 

});

與多個事件觸發的問題是，有一些執行不應該被多次執行動作AJAX調用（如發送電子郵件至客戶端）。

此外，這種行爲（多個事件觸發）不是我可以預測的。有時它可以正常工作，有些則連續五次觸發事件。

我一直在網上搜索了一個星期，但我試過的一切都沒有解決問題。任何解決方案將不勝感激:)

謝謝！

來源

2015-04-22 christostsang

你嘗試過'。一（ '點擊'）'，而不是'。對（ '點擊'）' ？ –

這是SPA嗎？聽起來像你可能有一些緩存的JavaScript。嘗試硬刷新頁面並單擊並查看該項目被調用的次數。基本上我想知道是否綁定這個點擊函數的文件多次被帶到頁面上。 – ajmajmajma

不，我沒有嘗試過一個（），因爲我想能夠再次選擇它並執行相同的操作。例如，如果這個事件綁定在一個單選按鈕上.. – christostsang

根據我在這裏閱讀的內容 - 我想你會帶來不止一次點擊綁定事件的js文件。如果您使用自定義路由或單頁面應用程序而不刷新頁面，則很可能基於您所說的內容。

你可以通過在click事件中添加一個console.log（在ajax上面）來測試這個理論，並且用它來檢查日誌。如果你點擊它並記錄不止一次登錄的內容，那麼你就知道這是問題所在。我不認爲這是阿賈克斯。

來源

2015-04-22 13:56:16 ajmajmajma

一旦我按下導航欄上的選擇，我刪除所有的JS文件，我只鏈接選定的JS文件點擊。我對CSS也做了同樣的事情。但我會在一段時間內測試一下。 – christostsang

@christostsang我遇到了這個問題，我的猜測是你不止一次加載了js文件。例如，如果您使用php來交換頁面，並且您在該php頁面中有js文件，那麼如果您轉到其他頁面並返回 - 您將在瀏覽器中加載該js文件兩次（假設您沒有刷新頁面或不使用requirejs之類的東西），因此事件不止一次觸發。 – ajmajmajma

目前我不在家測試它，但只是給你一個想法這是如何刪除js文件：http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml。我也使用相同的方式添加我想要的js文件。在任何時候，在我的HTML中，我只能看到主js文件的一個實例。這是否準確？還是它加載多次相同的文件，我只是不能看到它？ – christostsang

根據您的描述，我的猜測是您並未移除事件偵聽器。所以每次切換標籤/頁面時，都會一遍又一遍地添加同一個事件。即使你試圖做到這一點，但某些事情並不正確。我懷疑它與Ajax有什麼關係。

來源

2015-04-22 14:16:11 user3492940

您是否意味着在導航欄選擇時刪除所有事件偵聽器？ – christostsang

@christostsang這正是上面在ajmajmajma的回答中提出的建議 –

我在一段時間裏也遇到過同樣的問題。我通過在執行新的事件處理程序之前解除與元素相關聯的所有事件來解決此問題。使用這樣的：

$('#element').unbind().click() 
    { 
    //write something here 
    }

這將創建一個新的人之前解除綁定以前的事件處理程序。我認爲這對你會有好處。

如果您正在使用jQuery版本1.7+ 你可以使用關閉（）這樣的

$('#element').Off().click() 
    { 
    //write something here 
    }

來源

2017-08-03 12:24:10

jQuery事件多次觸發

回答

相關問題