Question

我将动态div作为行：

<table border=1><tr><td>
<div id='div1'>fgg</div>
<div id='div2'>dfgdfg</div>
<div id='div3'>vcbcvb</div>
<div id='div4'>sdfsdf</div>
</td></tr></table>

如何在每个div的鼠标悬停上调用jQuery函数？这些div是动态的，可以改变数量。

Answer 1

$("td div").live("mouseover", function() {
 //mouseover code here
});

我建议您为div使用一个类，并使用选择器：$(".rows")或类似的。但是，上述内容适用于您提供的标记。

如果您必须使用ID ，则可以按ID添加。请记住，在添加新项目时，您必须为id运行此代码（打败原始问题的动态部分）。

$("#mydivid").mouseover(function() {
  //mouseover code here
});

你可以在这样的列表中使用：

var divs = ["mydiv1", "mydiv2", "mydiv3"];
$(divs).each(function() {
  $("#" + this).mouseover(function() {
    //mouseover code here
  });
});

这是一个非常糟糕的方法，我强烈建议使用类。

Answer 2

使用事件委派，.live()或.delegate()将事件绑定到动态创建的元素。

Answer 3

另一个简单的方法是为所有div提供相同的类名。你可以通过类名而不是id挂钩click事件。在代码中你也可以使用“this”关键字引用当前的div块

Answer 4

除非有某种原因你特别不能为每个div使用重复的类名，否则live()方法就可以了。但是，使用类会更有效率。

如何在动态div上调用鼠标悬停功能

4 个答案: