Question

可能重复：
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() {

与

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

这应该让新东西发挥作用。

Answer 2

你必须包装

$('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/“委托”

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

2 个答案: