成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JQuery 事件綁定不生效

ivan_qhz / 2610人閱讀

摘要：一個(gè)同時(shí)問(wèn)我，事件綁定為什么不生效，最好通過(guò)查找，發(fā)現(xiàn)了問(wèn)題。一般而言，事件綁定不生效，是一些新手經(jīng)常遇到的問(wèn)題，其實(shí)都是簡(jiǎn)單的問(wèn)題，大概分兩種情況。先上代碼以下兩個(gè)的事件綁定都不生效。

一個(gè)同時(shí)問(wèn)我，JQuery事件綁定為什么不生效，最好通過(guò)查找，發(fā)現(xiàn)了問(wèn)題。
一般而言，JQuery事件綁定不生效，是一些新手經(jīng)常遇到的問(wèn)題，其實(shí)都是簡(jiǎn)單的問(wèn)題，大概分兩種情況。 先上代碼,以下兩個(gè)button的事件綁定都不生效。

下面講述原理：

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

首先看button1的事件綁定，

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

button1在未加載完成之前，通過(guò)$("#button1").click方法來(lái)進(jìn)行事件綁定，由于此時(shí)未加載完成，實(shí)際上$("#button1")是一個(gè)空數(shù)組，所以最終的結(jié)果是未對(duì)任何元素進(jìn)行事件綁定。 那么如何解決這個(gè)問(wèn)題呢，其實(shí)這個(gè)問(wèn)題本不應(yīng)該發(fā)生，一般新手比較容易出問(wèn)題，解決的方式很簡(jiǎn)單，把事件綁定放在加載完成之后，JQuery的做法是：

$(function(){
$("#button1").click(function () {
          alert("button1 clicked");
      });
})
綁定事件后移除了元素重新加入

再看button2，button2首先通過(guò)JQuery 的方法被創(chuàng)建出來(lái)，然后被加入到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);    
         })

此時(shí)點(diǎn)擊也不會(huì)生效，這是因?yàn)?，在從文檔中移除的時(shí)候，JQuery 會(huì)自動(dòng)把綁定的事件移除掉了，然后在加入的時(shí)候，事件綁定已經(jīng)不存在了；這種情況應(yīng)該如何解決呢？ 一般來(lái)說(shuō)，如果某些元素存在頻繁的添加 移除 在添加的操作，可以考慮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);
總結(jié)

最終正確的代碼如下：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88949.html

相關(guān)文章

  • JavaScript學(xué)習(xí)

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

    J4ck_Chan 評(píng)論0 收藏0

  • 細(xì)說(shuō) jQuery 事件篇（五） - 事件的移除和重綁定

    摘要：一種做法是在事件處理程序中使用條件語(yǔ)句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕后，所有的事件的處理程序又被重新綁定回來(lái)。 如果我們需要移除已經(jīng)注冊(cè)的事件處理程序，使某些處理程序失效。一種做法是在事件處理程序中使用條件語(yǔ)句進(jìn)行判斷，另一種更徹底的做法就是直接移除該處理程序。 移除處理程序 假設(shè)有個(gè) div 和 button，當(dāng)我們點(diǎn)擊...

    boredream 評(píng)論0 收藏0

  • jQuery 事件用法詳解

    摘要：只觸發(fā)事件解除事件任然會(huì)執(zhí)行自定義事件把多個(gè)事件組合起來(lái)，或者在特定條件下觸發(fā)事件，普通的事件綁定是無(wú)法滿足需要的，可以通過(guò)自定義事件來(lái)形成組合。 jQuery 事件用法詳解 簡(jiǎn)介 jquery 之所以成為最受歡迎的前端庫(kù)，很大一部分是得益于它的事件具有良好的語(yǔ)義，優(yōu)秀的兼容性，并且便于管理和擴(kuò)展。 在這里我會(huì)介紹 jquery 事件的一些比較基礎(chǔ)的用法。 實(shí)現(xiàn)原理 jquery 事件...

    shiina 評(píng)論0 收藏0

  • jquery .bind() vs .live() vs .delegate() vs .on()

    摘要：但是當(dāng)我們點(diǎn)擊新添加的元素也就是時(shí)，卻沒(méi)有把這個(gè)加給它。它的原理是利用事件冒泡最終代理給最頂層的。對(duì)于動(dòng)態(tài)生成的元素也生效因?yàn)槠鋵?shí)是綁定在上的。 假設(shè)我們有這樣一段html： book 1 book 2 add a li 1: .bind().bind方法的用法是這樣的：targetElment.bind(eventType, eventHandler)所以假入我...

    baukh789 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<