1

我正在尝试使用 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>');
            }
        });
    });
});
​
4

2 回答 2

5

尝试更改悬停功能，如下所示，

演示

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

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

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

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

所以我们有另一种有趣的方法，称为事件委托。

直接和委托事件

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

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

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

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

于 2012-05-10T18:12:40.267 回答
0

正如@Vega 所指出的，on()用于 jQuery 1.7 的版本。如果您使用的是以前的版本，请使用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('<tr class="tableRow"><td width="750" id="' + $(e).children().attr('id') + '">' + $(e).children().html() + '</td></tr>');
            }
        });
    });
});

演示

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

于 2012-05-10T18:21:21.450 回答