HTML中关于动态创建的标签无法绑定js事件的解决方法

xiaoxiao2025-04-11  14

小伙伴们在前端页面的时候,是不是会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题。如下代码,使用jquery在body中动态创建一个class为demo的Button按钮,当点击这个按钮时无法触发点击事件。

<script> $(function(){ $("body").html("<button class='demo'>按钮</button>"); $(".demo").click(function(){ alert("弹窗"); }); }); </script> <body> </body> --------------------- 作者:赌上青春 来源: 原文: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> --------------------- 作者:赌上青春 来源: 原文: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   

转载请注明原文地址: https://www.6miu.com/read-5028011.html

最新回复(0)