jQuery动态绑定

一、原始需求

在实际项目的时候,遇到了一个问题,就是通过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无效。。。

四、补充

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

### 如何使用 jQuery 动态绑定 click 事件 当页面中的 HTML 元素是通过 JavaScript 或者其他方式动态生成时,传统的 `$(selector).click()` 方法可能无法正常工作。这是因为这些方法仅适用于在 DOM 加载完成时已经存在的元素。对于动态添加的元素,可以使用 **`on()`** 方法来实现事件委托。 以下是关于如何使用 jQuery 动态绑定 click 事件的具体说明: #### 使用 `.on()` 方法 `.on()` 是一种强大的方法,用于为当前以及未来动态创建的元素绑定事件处理程序。其语法如下: ```javascript $(staticParentElement).on(eventName, dynamicChildSelector, eventHandler); ``` - `staticParentElement`: 静态父级元素的选择器,该元素必须存在于 DOM 中。 - `eventName`: 要监听的事件名称(如 `"click"`)。 - `dynamicChildSelector`: 动态子元素的选择器。 - `eventHandler`: 当触发事件时执行的回调函数。 这种方法利用了事件冒泡机制,即使目标元素尚未存在,也可以通过监听其父容器上的事件来捕获它们的行为[^3]。 #### 示例代码 下面是一个具体的例子,展示如何动态绑定 click 事件到新创建的按钮上: ```html <div id="container"></div> <button id="addButton">Add New Button</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // 添加新的按钮 $('#addButton').click(function () { $('<button class="newBtn">Click Me!</button>').appendTo('#container'); }); // 绑定 click 事件给动态生成的按钮 $('#container').on('click', '.newBtn', function () { alert('Dynamic button clicked!'); }); </script> ``` 在这个示例中,每次点击 `#addButton` 按钮都会向 `#container` 容器内新增一个带有类名 `newBtn` 的按钮。尽管这些按钮是在运行时动态生成的,但由于我们使用了 `.on()` 方法并将事件绑定到了静态的 `#container` 上,因此仍然能够成功响应用户的点击操作。 #### 关键点总结 1. 对于动态生成的内容,推荐始终采用 `.on()` 方法而不是直接调用 `.click()` 来设置事件处理器。 2. 确保所选的父节点在整个生命周期都保持不变,并且它应该尽可能接近实际的目标元素以提高性能和可维护性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值