JQuery 事件綁定不生效

ivan_qhz 發布于2019-08-21 16:57 / 2605人閱讀

摘要：一個同時問我，事件綁定為什么不生效，最好通過查找，發現了問題。一般而言，事件綁定不生效，是一些新手經常遇到的問題，其實都是簡單的問題，大概分兩種情況。先上代碼以下兩個的事件綁定都不生效。

一個同時問我，JQuery事件綁定為什么不生效，最好通過查找，發現了問題。
一般而言，JQuery事件綁定不生效，是一些新手經常遇到的問題，其實都是簡單的問題，大概分兩種情況。先上代碼,以下兩個button的事件綁定都不生效。

下面講述原理：

綁定事件在未加載完成之前

首先看button1的事件綁定，

$("#button1").click(function () {
          alert("button1 clicked");
      });

button1在未加載完成之前，通過$("#button1").click方法來進行事件綁定，由于此時未加載完成，實際上$("#button1")是一個空數組，所以最終的結果是未對任何元素進行事件綁定。那么如何解決這個問題呢，其實這個問題本不應該發生，一般新手比較容易出問題，解決的方式很簡單，把事件綁定放在加載完成之后，JQuery的做法是：

$(function(){
$("#button1").click(function () {
          alert("button1 clicked");
      });
})

綁定事件后移除了元素重新加入

再看button2，button2首先通過JQuery 的方法被創建出來，然后被加入到body中，然后綁定事件，之后從body中移除，然后在加入body中：

var div = $("");
          var body = $(document.body);
          body.append(div);
          div.find("#button2").click(function () {
               alert("button2 clicked");
            });
          div.remove();
          body.append(div);    
         })

此時點擊也不會生效，這是因為，在從文檔中移除的時候，JQuery 會自動把綁定的事件移除掉了，然后在加入的時候，事件綁定已經不存在了；這種情況應該如何解決呢？一般來說，如果某些元素存在頻繁的添加移除在添加的操作，可以考慮delegate的方式，比如：

 var div = $("");
          var body = $(document.body);
          body.delegate("#button2","click",function(){
              alert("button2 clicked");
          });
          body.append(div);
          // div.find("#button2").click(function () {
          //      alert("button2 clicked");
       //      });
          div.remove();
          body.append(div);

總結

最終正確的代碼如下：

云服務器 GPU云服務器 jquery預綁定事件 jquery綁定hover事件 jquery綁定事件on 緩存不生效

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88949.html

JavaScript學習

摘要：和，前者是過濾選擇器而后者是子代選擇器。第三章中的操作查找節點想要查找元素節點或者是屬性節點，就是通過前一章學習的選擇器獲取相應元素的文本，或者是通過選擇器屬性名獲取某元素相應屬性的值。 About Javscript record the thing which maybe forgetten 原生JavaScript Javascript DOM document.writ...

J4ck_Chan 2019-08-19 17:57 評論0 收藏0
細說 jQuery 事件篇（五） - 事件的移除和重綁定

摘要：一種做法是在事件處理程序中使用條件語句進行判斷，另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個按鈕，當點擊按鈕后，所有的事件的處理程序又被重新綁定回來。如果我們需要移除已經注冊的事件處理程序，使某些處理程序失效。一種做法是在事件處理程序中使用條件語句進行判斷，另一種更徹底的做法就是直接移除該處理程序。移除處理程序假設有個 div 和 button，當我們點擊...

boredream 2019-08-19 14:53 評論0 收藏0
jQuery 事件用法詳解

摘要：只觸發事件解除事件任然會執行自定義事件把多個事件組合起來，或者在特定條件下觸發事件，普通的事件綁定是無法滿足需要的，可以通過自定義事件來形成組合。 jQuery 事件用法詳解簡介 jquery 之所以成為最受歡迎的前端庫，很大一部分是得益于它的事件具有良好的語義，優秀的兼容性，并且便于管理和擴展。在這里我會介紹 jquery 事件的一些比較基礎的用法。實現原理 jquery 事件...

shiina 2019-08-19 18:36 評論0 收藏0
jquery .bind() vs .live() vs .delegate() vs .on()

摘要：但是當我們點擊新添加的元素也就是時，卻沒有把這個加給它。它的原理是利用事件冒泡最終代理給最頂層的。對于動態生成的元素也生效因為其實是綁定在上的。假設我們有這樣一段html： book 1 book 2 add a li 1: .bind().bind方法的用法是這樣的：targetElment.bind(eventType, eventHandler)所以假入我...

baukh789 2019-08-20 17:23 評論0 收藏0