本文介紹了js/jq 動態加入的元素不能觸發綁定事件解決方案,如果jquery版本是在1.3-1.8之間的話,js/jq動態加入的元素觸發綁定事件的解決方法。
請看你們的版本並對號入座:
jquery1.6版本以下都不支援on委託事件
jquery1.3至jQuery1.8版都支援live委託事件
jquery1.9 以後的版本不支援live委託事件,但是on事件可以取代live
jquery1.3版本以下的(不包括jquery1 .3),是時候更新你的jquery版本了。 因為 無解無解無解無解無解無解
如果jquery版本是在1.3-1.8之間的話,js/jq動態添加的元素觸發綁定事件的解決方法(不建議用on事件,因為1.6版本以下不支援on事件,會報錯)
click例子 $('element').live('click',function(){}) element可以是动态生成的元素,可以是它的类或者id
如果jquery版本是在1.9或更高的話,live委託事件是被移除的,透過on來實現。 js/jq動態新增的元素觸發綁定事件的解決方法
注意注意:如果頁面同時存在低版本的jq(1.3-1.8)和高版本jq( jquery1.9以上)的話,live委託事件會被高版本移除,最後導致雖然有jquery版本是在1.3-1.8之間,使用了live事件,頁面會報錯。
click例子 $('父元素').on('click', '子元素', function(){})
此時動態載入出來的元素一定要在$(‘父元素’)裡面,否則綁定事件失效。換句話說,本來應該綁定A元素,但A元素是動態產生的,所以jq應該取得A元素的父元素來監聽A元素是否發生click事件。
舉例
<!DOCTYPE html> <html> <head> <title>js/jq 动态添加的元素不能触发绑定事件解决方案</title> </head> <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script><body> <button>添加a标签</button> <p class="a-Box"> <a href="javascript:;" class="alt">My name is</a><br> </p> </body> </html> <script type="text/javascript"> $('.a-Box').on('click', 'a', function(){ alert('Jachin'); }) $('button').click(function(){ $('p').append('<a href="javascript:;" class="alt">My name is</a><br>'); }) </script>
這樣就可以完美解決動態載入出來的元素無法被監聽。
最後附上個版本的jquery
<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.3.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.5.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.6.1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script> <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>登入後複製以上是js/jq動態載入出來的元素無法被監聽的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!