怎么让jquery生成的dom事件也生效?

avatar

jquery里添加事件方法一般为

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div id="container">
        <button class="box">click me1</button>
        <button class="box">click me2</button>
    </div>
</body>
<script>
    $(function () {
        $(".box").click(function () {
            console.log($(this).text());
        })
        $("#container").append($("<button class='box'>click me3</button>"));
    })
</script>

</html>

但如果页上使用jquery生成了一些类似的dom,这种事件就失效了,比如

<script>
    $(function () {
        $(".box").click(function () {
            // 这里只会输出前两个按钮点击后的内容,点击第三个按钮没有效果
            console.log($(this).text());
        })
        // 在事件已经注册后再添加一些类似的dom元素
        $("#container").append($("<button class='box'>click me3</button>"));
    })
</script>

碰到这种情况就要换个方式注册事件了

<script>
    $(function () {
        // 使用这种方式注册的事件即使是页面渲染好之后另外再使用jquery添加的元素也能识别出来
        $(document).on('click', '.box', function () {
            console.log($(this).text());
        })
        $("#container").append($("<button class='box'>click me3</button>"));
    })
</script>
0 条评论

目前还没有回答,快来帮帮TA吧!

添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录