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

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

问题说明




实现的功能如上所示，当鼠标滑过最后一列时，显示或隐藏超链接。

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> <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事件绑定到其上面即可。