漠漠睡今天在做一个项目的时候，又遇到了一个问题，问题就是“JS、JQ动态生成的html无法再次绑定JQ效果”，怕自己又忘记了，因此做一个记录解决办法：使用JQ中的document.on方式，具体执行如下：先上演示源码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &
今天在做一个项目的时候，又遇到了一个问题，问题就是“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事件了。