WEB前端:在JS、JQ动态生成的html中使JQuery继续执行的方式

今天在做一个项目的时候,又遇到了一个问题,问题就是“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事件了。


评论