将TR移动到另一个表后，jquery hover（）和click（）不起作用

我正在尝试使用jQuery的hover（）来更改鼠标hover的任何TR的背景颜色，我还使用click（）在表之间移动TR。 但是一旦我将TR移动到另一个表，hover（）和click（）就不起作用了。

有人可以告诉我为什么吗？ 我怎么解决这个问题？ 这是我的代码： http ： //jsfiddle.net/MJNGL/

$(document).ready(function() { $("table tr").hover( function() { $(this).css('background', 'yellow'); }, function () { $(this).css('background', ''); } ) $("table tr").click(function () { var id = $(this).children().attr("id"); $(".cityItem1").each(function m(x,e) { if ($(e).children().attr("id") == id) { $(e).remove(); $("#tblCity2").append('' + $(e).children().html() + ''); } }); }); }); ​ 

Answer 1

尝试更改下面的hoverfunction，

DEMO

 $("table").on('mouseenter', 'tr', function() { $(this).css('background', 'yellow'); }).on('mouseleave', 'tr', function () { $(this).css('background', ''); }); 

为什么你的代码不起作用？

事件处理程序绑定到DOM中可用的元素。 在你的情况下，onPageLoad $('table tr') – 返回当前存在于DOM中的2个匹配的tr ，因此hover和click事件仅绑定到那两个tr 。

稍后click tr ，从表中删除该行并将其附加到表2.此时，您必须再次将处理程序重新绑定到新添加的行。 但是每次添加行时绑定处理程序都是一个痛苦的过程。

所以我们有另一个有趣的方法叫做事件委托。

直接和委派活动

大多数浏览器事件从文档中最深的最内层元素（事件目标）冒泡或传播，它们一直发生到正文和文档元素。

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on（）时页面上。 要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。 如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。 或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。 通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。 例如，此元素可以是模型 – 视图 – 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。 在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

〜来自jQuery doc http://api.jquery.com/on/

Answer 2

正如@Vega所指出的那样，从1.7开始，对jQuery版本使用on() 。 如果您使用的是以前的版本，请使用delegate() 。

这将是jQuery <1.7的代码：

 $(document).ready(function() { $("table").delegate('tr', 'hover', function() { $(this).css('background', 'yellow'); }); $("table").delegate('tr', 'mouseout', function() { $(this).css('background', ''); } ); $("table tr").click(function () { var id = $(this).children().attr("id"); $(".cityItem1").each(function m(x,e) { if ($(e).children().attr("id") == id) { $(e).remove(); $("#tblCity2").append('' + $(e).children().html() + ''); } }); }); }); 

DEMO

对于jQuery> = 1.7，使用Vega的代码。