JQuery给动态加载的节点绑定有效事件

最新推荐文章于 2023-03-08 14:46:38 发布

海阳之新

最新推荐文章于 2023-03-08 14:46:38 发布

阅读量522

点赞数

分类专栏： HTML5 文章标签： Jquery 给动态加载的节点绑定有效事件

本文链接：https://blog.csdn.net/vsiryxm/article/details/50721228

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>示例：给动态加载的节点绑定有效事件_测试</title>
    <meta charset="utf-8"/>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        nav { width: 1000px; height: 50px; line-height: 50px; font-size: 0;}
        nav a{ display: inline-block; width: auto; height: 50px; margin-right: 10px; font-size: 16px; line-height: 50px;}
        nav a:hover { background-color: #ff0;}
    </style>
</head>

<body>
<script>
    $(function() {
        $('button').click(function() {
            $("<a href='#'>动态加载内容2</a>").attr("class","add-content").appendTo("nav");
        });
        $("nav").on("click",".add-content",function() {
            alert("动态加载后的内容，单击事件生效了！");
        });
    });
</script>
<nav><a href="#" class="add-content">首次内容1</a></nav>
<button>追加节点内容</button>
</body>
</html>