之前就一直受這個問題的困擾，在jQuery1.7版本之后添加了on方法，之前就了解過，其優越性高于live(),bind(),delegate()等方法，在此之前項目中想用這個來測試結果發現，居然動態生成的標簽點擊了沒反應，而live方法卻能夠支持，于是乎到處查資料，問網友，結果找了好久在一篇文章中終于找到了答案。。。

?

jQuery 使用on綁定動態生成的元素時，不能直接用該對象操作，而是選擇其非動態生成的父節點然后再找到本身才能達到效果。大家看看源碼就知道了。生成的按鈕基數項on方法點擊無效live方法有效。

比如頁面上有下邊兩個元素：

<input type="button" name="addbtn" value="按鈕添加" /> <div id="test"></div>

使用下邊的jQuery代碼大家可以對比看看區別：

$(function () {var a = 1,$_div = $('#test');$('input[name=addbtn]').on('click', function () {$_div.append('<input type="button" name="test' + a + '" value="按鈕' + a + '"/>');a++;});//偶數項點擊事件$_div.on('click', 'input[name^=test]:even', function () { alert('我是有效的on方法,你能看見我嗎：' + this.value);});//奇數項綁定的點擊事件 發現點擊無效，而是用live方法卻能夠支持$('input[name^=test]:odd').on('click', function () { alert('我是無效的on方法,你不能看見我');});//奇數項綁定的點擊事件 發現點擊無效，而是用live方法卻能夠支持$('input[name^=test]:odd').live('click', function () {alert('我是live方法,你能看見我嗎：' + this.value);}); });

代碼簡單，就不演示了。

轉載于:https://www.cnblogs.com/imsomnus/p/4512261.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jQuery on()方法绑定动态元素的点击事件无效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。