动态生成的节点如何绑定事件

本篇介绍如何给动态生成的节点绑定事件

<button>添加节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>

js代码如下，实现给追加的li节点绑定点击事件，两种方式，请注意！

<script>
    $(function () {
        $("button").click(function () {
            var $li = $("li:first").clone(false);
            $("ul").append($li);
        });
        /*第一种方式：深复制li节点（不常用，只能使用复制节点时，才能使用）*/
        // $("li").click(function () {
        //     alert($(this).html())
        // });

        /*第二种方式：采用事件委托（推荐），无论使用什么方法添加的节点，事件都可以被绑定*/
        $("body").delegate("li", "click", function () {
            alert($(this).html())
        })
    })
</script>

刚才看文章推荐，发现delegate()事件底层也是使用on()事件实现的动态绑定，所以，我们也可以使用on()进行动态节点绑定 点击查看