将TR移动到另一个表后,jquery hover()和click()不起作用

Question

我正在尝试使用jQuery的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('<tr class="tableRow"><td width="750" id="' + $(e).children().attr('id') + '">' + $(e).children().html() + '</td></tr>');
            }
        });
    });
});
?

Answer 1

尝试更改下面的悬停功能,

DEMO

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

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

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

后来click在tr你从表中删除该行并追加到表2.在这一点上,你必须再重新绑定的处理程序,以新添加的行.但是每次添加行时绑定处理程序都是一个痛苦的过程.

因此,我们有一种称为事件委派的备用方法.

直接和委派活动

大多数浏览器事件从文档中最深的,最里面的元素(事件目标)起泡或传播,它们一直发生到正文和文档元素.

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

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

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