jquery的on()绑定无效的方式

本文介绍了如何使用jQuery的on()方法正确地为动态创建的元素绑定事件。通过示例对比了错误与正确的做法,并展示了如何为动态添加的checkbox设置单选功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。

?
1
2
3
<div id= "test" >
<div class= "evt" >evt1</div>
</div>

错误的用法,下面方法只为第一个class 为 evt 的div 绑定了click事件,使用append动态创建的div则没有绑定

?
1
2
3
4
5
<script>
// 先绑定事件再添加div
$( '#test .evt' ).on( 'click' , function () {alert($( this ).text())});
$( '#test' ).append( '<div class="evt">evt2</div>' );
</script>

正确的用法如下:

?
1
2
3
4
<script>
$( 'body' ).on( 'click' , '#test .evt' , function () {alert($( this ).text())});
$( '#test' ).append( '<div class="evt">evt2</div>' );
</script>

 

 

checkbox单选设置  如果 <input name="ck" type="checkbox">是动态添加的则可以这样

$("#grid").on("click","input[name=ck]",function(){

$("input[name=ck]").not(this).prop("checked",false);

});

  注:$(selector).on(event,childSelector,data,function,map)

 

 

 

### jQuery `on()` 事件无效的原因分析 `on()` 是 jQuery 中用于绑定事件的核心方法之一,尤其适用于动态生成的 DOM 元素。然而,在某些情况下可能会遇到 `on()` 绑定事件无效的情况。以下是可能的原因及其对应的解决方案: #### 1. **目标元素不存在于初始 DOM** 如果作为事件代理的目标容器(即第一个参数中的静态父级元素)在页面加载时并不存在,则 `on()` 的事件监听无法正常工作[^2]。 - 解决方案:确保所选的父级元素在文档加载完成时已经存在。通常可以选择更高级别的静态节点,比如 `document` 或者某个固定的父容器。 ```javascript // 使用 document 作为静态父级元素 $(document).on('click', '.dynamic-element', function() { console.log('Event triggered'); }); ``` --- #### 2. **选择器错误或不匹配** 即使绑定了 `on()` 方法,但如果第二个参数的选择器未能正确匹配到实际触发事件的子元素,也会导致事件无效[^3]。 - 解决方案:仔细检查选择器语法以及它是否能够准确指向预期的动态元素。 ```javascript // 正确示例 $('#static-parent').on('click', '.child-class', function() { console.log('Child clicked!'); }); // 错误示例 (假设 .wrong-class 并未应用于任何子项) $('#static-parent').on('click', '.wrong-class', function() {}); ``` --- #### 3. **DOM 结构变化影响事件冒泡路径** 当动态添加的内容改变了原有的 DOM 层次结构,可能导致原本设置好的事件委托机制失效[^4]。 - 解决方案:重新评估整个 HTML 构造过程,并确认新加入的部分仍然处于原先定义的有效范围内;必要时调整事件挂载位置至更高层次不变动区域之上。 --- #### 4. **重复绑定覆盖原有行为** 多次调用相同类型的 `on()` 可能会意外地重写之前的处理逻辑,从而掩盖掉想要的效果[^1]。 - 解决方案:通过先移除旧有绑定再新增的方式规避冲突问题。 ```javascript $('.target-selector').off('event-type'); // 移除已有事件 $('.target-selector').on('event-type', handlerFunction); // 添加新的事件处理器 ``` --- #### 5. **JavaScript 执行顺序不当** 假如相关脚本文件被放置到了 `<head>` 部分而没有等待 DOM 完全准备好就开始运行的话,那么此时尝试操作尚未渲染出来的部分自然不会成功[^2]。 - 解决方案:利用 `$(document).ready()` 来延迟执行直到所有必要的组件都已构建完毕后再启动初始化动作。 ```javascript $(document).ready(function(){ $('#container-id').on('click', '.item-class', function(event){ alert("Item was clicked!"); }); }); ``` --- ### 总结建议 为了防止以上提到的各种潜在陷阱发生,请遵循如下最佳实践: - 始终选取可靠的、始终存在的上级标签来充当事件捕获起点; - 准确编写 CSS 类名或其他标识符以限定作用范围; - 考虑好整体布局规划避免不必要的重构干扰既有功能实现; - 合理安排资源加载时机保障各环节衔接顺畅无阻塞现象出现。 ```javascript // 推荐的最佳实践案例 $(document).ready(function(){ $(document.body).on('click', '[data-action]', function(e){ e.preventDefault(); const action = $(this).data('action'); switch(action){ case 'submit': submitForm(); break; default: console.warn(`Unknown action: ${action}`); } }); function submitForm(){} }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值