将TR移至另一张表后，jquery hover()和click()无法正常工作 [英] jquery hover() and click() don't work after moving TR to another table
问题描述
我正在尝试使用jQuery的hover()来更改鼠标悬停的任何TR的背景颜色，并且我还使用click()在表之间移动TR.但是一旦将TR移到另一个表后，hover()和click()将无法使用.
I'm trying to use jQuery's hover() to change the background color any TR that you mouse over, and I also use a click() to move a TR between tables. But once I move the TR to another table, hover() and click() don't work.
有人可以告诉我为什么吗?我该如何解决呢?这是我的代码: http://jsfiddle.net/MJNGL/
Can someone tell me why? And how I can fix this? Here's my code: 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>');
}
});
});
});
推荐答案
尝试更改如下所示的悬停功能，
Try changing the hover function like below,
$("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.
The event handlers are bound to the elements that are available in DOM. In your case, onPageLoad $('table tr') - returns 2 matching trs that are currently there in DOM and so the hover and click event are bound only to those two trs.
tr上click上的
之后，您将从表中删除该行并将其追加到表2.这时，您必须再次将处理程序重新绑定到新添加的行.但这是每次添加行时绑定处理程序的痛苦过程.
Later on click on the tr you remove the row from the table and append it to table 2. At this point you have to re-bind the handler again to the newly added row. But that is a painful process to bind the handler every time you add a row.
因此，我们有另一种有趣的方法，称为事件委托.
So we have an alternate interesting approach called event-delegation.
直接事件和委派事件
大多数浏览器事件从文档中最深的最内层元素(事件目标)起泡或传播，一直发生到正文和文档元素.
The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element.
事件处理程序仅绑定到当前选定的元素；当您的代码调用.on()时，它们必须存在于页面上.为了确保元素存在并可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定.如果将新的HTML注入到页面中，则在将新的HTML放入页面后，选择元素并附加事件处理程序.或者，使用委托事件来附加事件处理程序，如下所述.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.
委派的事件的优势在于，它们可以处理以后在后代添加到文档中的后代元素中的事件.通过选择保证在附加委托事件处理程序时会出现的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要.例如，如果事件处理程序想要监视文档中的所有冒泡事件，则此元素可以是Model-View-Controller设计中视图的容器元素，也可以是文档.在加载任何其他HTML之前，文档元素位于文档的开头，因此可以在其中附加事件，而不必等待文档准备就绪.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
〜从jQuery文档 http://api.jquery.com/on/
~ From jQuery doc http://api.jquery.com/on/
这篇关于将TR移至另一张表后，jquery hover()和click()无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
