jQuery动态绑定

Posted 2020-06-09

一、原始需求

在实际项目的时候，遇到了一个问题，就是通过JS动态生成的元素，无法触发JS事件。

原始的JS代码：

$(function () {
    $(".original").click(function () {
        alert("123");
    });
})

上述类型的JS代码在处理随着页面加载而加载的DOM元素是没有问题的。但是在处理页面加载完成后，通过动态添加的方式添加上的元素是无效的，需要另外利用Jquery绑定。

动态添加元素的JS代码：

$(function () {
     $(".run").click(function () {
     var btn = "<button class=‘original‘>我是新来的的</button>";
     $(".out").append(btn);
     });
 })

此时如果点击 新添加的按钮，通过上述声明式无法处理响应事件的。

PS：至于原因是什么，这个我也不太清楚。

二、jQuery的on方法

通过查阅相关说明，发现jQuery的on()方法是支持在动态添加的元素上绑定事件的，使用见：

官网说明（英文）：官方API解释

中文说明（中文）：中文API解释（推荐）

详细说明请参考上述网站，这里只提出几个重点来讲解：

1. 使用格式:jQueryObject.on( events [, selector ] [, data ], handler )---[此为可选项]
2. 解释：events为单个或多个事件，handler为触发事件要执行的动作。
3. 对于selector而言，如果为null或不写那么是绑定jQueryObject匹配到的元素;如果不为null，则表明绑定的是jQuyerObject的后台元素中所有符合selector要求的元素。

三、处理方法

<script type="text/javascript">
        $(function () {
            // 方法1
            $(document).on("click", ".original", function () {
                alert("HHHH");
            });
            //无效？
            $(".original").on("click", function () {
                alert("HHHH");
            });
        })
    </script>

方法1肯定有效，但是很奇怪方法2无效。。。

四、补充

思考好了再补充，留待此次。。。