HTML中關於動態建立的標籤無法繫結js事件的解決方法
阿新 • • 發佈：2018-11-13
小夥伴們在前端頁面的時候，是不是會經常遇到用JavaScript動態創建出來的Button按鈕或其他標籤無法使用點選事件的問題。如下程式碼，使用jquery在body中動態建立一個class為demo的Button按鈕，當點選這個按鈕時無法觸發點選事件。
<script> $(function(){ $("body").html("<button class='demo'>按鈕</button>"); $(".demo").click(function(){ alert("彈窗"); }); }); </script> <body> </body> --------------------- 作者：賭上青春 來源：CSDN 原文：https://blog.csdn.net/qq_31788297/article/details/59695700 版權宣告：本文為博主原創文章，轉載請附上博文連結！
這裡給出一個jquery的解決方案：
將以上程式碼中的 $(“.demo”).click(function(){………}); 修改為 $(document).on(“click”,”.demo”,function(){………});
修改後的程式碼為：
<script> $(function(){ $("body").html("<button class='demo'>按鈕</button>"); $(document).on("click",".demo",function(){ alert("彈窗"); }); }); </script> <body> </body> --------------------- 作者：賭上青春 來源：CSDN 原文：https://blog.csdn.net/qq_31788297/article/details/59695700 版權宣告：本文為博主原創文章，轉載請附上博文連結！
**注意：網上有一種方法是這樣的
將 $(“.demo”).click(function(){………}); 修改為 $(“.demo”).on(“click”,function(){………});
但是我自己用這種方法試了沒有成功。也許是我有些地方操作上有問題。如果你用這種方式測試可以使用的話還是優先使用這種方式吧。我個人也覺得在能用的情況這種方式還是比我的方式簡單的。
如果有什麼不理解的問題可以QQ聯絡我。
如有寫的不好的地方歡迎大家指出。謝謝。**
轉載連結：https://blog.csdn.net/qq_31788297/article/details/59695700