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') - 返回当前存在于DOM中的2个匹配的tr，因此hover和click事件仅绑定到这两个{{1} }}秒。

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

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

直接和委派活动

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

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

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

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

Answer 2

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

这将是jQuery的代码＆lt; 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('<tr class="tableRow"><td width="750" id="' + $(e).children().attr('id') + '">' + $(e).children().html() + '</td></tr>');
            }
        });
    });
});

<强> DEMO

对于jQuery＆gt; = 1.7，请使用Vega的代码。

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

2 个答案: