jquery - 将 JQuery 效果应用于新添加的元素

Question

Possible Duplicate:
Jquery live() vs delegate()

我在将 JQuery 应用于加载页面后添加到 DOM 的函数时遇到一些问题。我使用以下代码将新行添加到表主体:

  $("tbody").load("php/create_rows.php?" + $.param({ "type": "unique", "unit": "day", "interval": 2 }));

效果很好。行被添加，但作用于表主体中的行的 Jquery 函数不会影响新行。例如，行上的鼠标悬停应该应用一个类来更改背景颜色:

  $('tbody tr').hover(function() {
    $(this).find('td').addClass('hover');
  }, function() {
    $(this).find('td').removeClass('hover');
  });

但是它不起作用。它适用于页面上已经出现的代码，以及不是从 Jquery 生成的代码。

Answer 1

你必须包裹你的

$('tbody tr').hover(function() {

到一个函数中，当你向 DOM 添加动态元素时，你需要像这样调用该函数

function something (){
   $('tbody tr').hover(function() {
    $(this).find('td').addClass('hover');
  }, function() {
    $(this).find('td').removeClass('hover');
  });
}

$("document").append(someelement);
something();

使用输入字段完成的示例 http://jsfiddle.net/MKcaH/1/

想想你可以使用[1]:http://api.jquery.com/delegate/ “委托(delegate)”