今天在做一个项目的时候,又遇到了一个问题,问题就是“JS、JQ动态生成的html无法再次绑定JQ效果...
今天在做一个项目的时候,又遇到了一个问题,问题就是“JS、JQ动态生成的html无法再次绑定JQ效果”,怕自己又忘记了,因此做一个记录
解决办法:
使用JQ中的document.on方式,具体执行如下:
先上演示源码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WEB前端:在JS、JQ动态生成的html中使JQuery继续执行的方式</title> <script src="/jquery-2.2.4.min.js" type="text/javascript"></script> </head> <body> <div id="demo"> <p><input type="button" class="demo1" value="点击添加一个div"></p> </div> <script> $(document).ready(function(){ $(".demo1").click(function(){ $("#demo").append("<div id='demos'><p>我是第一次添加的内容</p><p><input type='button' class='demo2' value='点击删除生成的div'></p></div>") }) $(".demo2").click(function(){ $("#demos").remove(); }) }) </script> </body> </html>
我们希望的是点击demo1后,生成一个内容,然后点击生成的内容中的demo2删除生成的内容,这是我们所希望的
但是由于用JQ生成动态元素后,就没有办法继续使用生成的JQ事件了,所以现在我们可以使用jq中的on时间来处理这个问题
继续上修改后的源码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WEB前端:在JS、JQ动态生成的html中使JQuery继续执行的方式</title> <script src="https://blog.mijupai.com/zb_system/script/jquery-2.2.4.min.js" type="text/javascript"></script> </head> <body> <div id="demo"> <p><input type="button" class="demo1" value="点击添加一个div"></p> </div> <script> $(document).ready(function(){ $(".demo1").click(function(){ $("#demo").append("<div id='demos'><p>我是第一次添加的内容</p><p><input type='button' class='demo2' value='点击删除生成的div'></p></div>") }) $(document).on("click",".demo2",function(){ $("#demos").remove(); }); }) </script> </body> </html>
将原本的直接点击,修改为当页面再次加载完成后进行绑定点击事件,这样就可以使用生成的动态HTML绑定JQ事件了。