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

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()方法是可行的。 但是，使用类会更有效率。