jquery动态生成的元素绑定事件

最新推荐文章于 2024-01-10 17:41:24 发布

原创最新推荐文章于 2024-01-10 17:41:24 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用jQuery的on方法解决动态生成元素的鼠标悬停显示/隐藏链接问题。通过绑定事件到静态父元素上，确保即使动态添加新行也能正常触发事件。

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

本文是基于jquery_1.11.1.js来说明的。

问题说明

table显示地址
实现的功能如上所示，当鼠标滑过最后一列时，显示或隐藏超链接。
HTML中table的实现代码简略如下：

<table id="addressTable">       
<tr>
<td><input type="radio" name="addressradio" checked="checked"></td>
<td></td>
<td</td>
<td></td>
<td class="orderlink"><span><a href="#" class="updateAddress">修改</a>&nbsp;<c:if test="${defaultAddress==false}"><a href="#" class="setDefaultAddress">设为默认地址</a></c:if></span>
</td>
</tr>
</table>

如果没有动态添加一行，下面的代码即可实现显示或隐藏超链接。

 $(".orderlink").mouseover(function() {$(this).find("a").css("display","inline"); });
 $(".orderlink").mouseout(function(){$(this).find("a").css("display","none"); });

但是当动态的在表格中插入一行数据时，上述代码没有办法实现该功能。

问题解决

 $("#addressTable tbody").on('mouseover','tr',function(){
            $(this).find(".orderlink").find("a").css("display","inline");
        });
        $("#addressTable tbody").on('mouseout','tr',function(){
            $(this).find(".orderlink").find("a").css("display","none");
        });

问题分析总结
1. jquery中on函数定义和用法（摘自W3C事件on）
定义：on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
2. 语法
$(selector).on(event,childSelector,data,function,map)
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。
由空格分隔多个事件值。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
3. 注意事项：jQuery on绑定动态生成的元素时，不能直接用该元素操作，而是选择该元素非动态生成的父节点然后再找到本身才能达到效果。所以该问题首先将on绑定在table tbody(自动生成)上，当动态生成tr后，寻找tr对应td下的a元素，然后将mouseover和mouseout事件绑定到其上面即可。