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

Question

我尝试使用 jQuery 的悬停()来更改鼠标悬停在任何 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', '');
});

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

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

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

因此，我们有另一种有趣的方法，称为事件委托(delegate)。

直接和委托(delegate)事件

大多数浏览器事件从文档中最深、最内层的元素(事件目标)冒泡或传播，一直到正文和文档元素。

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

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

~ 来自 jQuery 文档 http://api.jquery.com/on/