jQuery学习笔记之给动态生成元素绑定事件

最新推荐文章于 2024-07-12 11:14:33 发布

鬼畜的稀饭

最新推荐文章于 2024-07-12 11:14:33 发布

阅读量3.9k

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq12547345/article/details/49756519

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

使用jQuery的$(selector).on("event","child",function(){});给静态元素绑定事件是比较容易的，比如下面这行代码就是给 p 元素绑定点击事件

$("p").on("click", function () {
                 alert("you click the p element");
                 })

但是如果是动态生成的元素，使用上面这段代码是没有效果的，因此要选择动态元素的某个父级静态元素，以此来绑定事件方可，具体见下段代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<script>
    $(document).ready(
            function () {
                $("button").on("click", function () {
                    $("#myDiv").append("<p>this is a new paragraph!</p>");
                });
                $(document).on("click", "#myDiv p", function () {
                    alert("you clicked the p element!");
                })
            }
    )
</script>
<body>
<div>
    <button id="btn_add">点击动态增加元素</button>
</div>
<div id="myDiv"></div>
</body>
</html>