Question

我有下面的jQuery函数，它会在p元素悬停时改变CSS。

$("p").hover (
function() {$(this).addClass("choice"); } ,
function() { $(this).removeClass("choice");} );

问题是它不会对用.html（）或.append（）编写的div的innerHTML起作用，就像这样

$('#div').html('<p>content that needs to highlight on hover</p>');

即使我尝试将函数本身插入到innerHTML中，如此

$('#div').append('<script type="text/javscript">$("p").hover ( function() {$(this).addClass("choice"); } , function() { $(this).removeClass("choice");} );<'+'/script>');

它仍然不能用于该div的HTML内容。

我在这里缺少什么？谢谢，任何帮助将不胜感激。

Answer 1

当您编写$("p").hover时，会对文档的当前状态进行一次性搜索，找到所有标记并附加事件处理程序。它不会将事件处理程序附加到您将来添加到文档中的标记。

如果你想为将来的标签设置事件处理程序，那么你需要使用.delegate()（对于pre-jQuery 1.7）或.on()（对于jQuery 1.7 +）。

使用jQuery 1.7+，它可以这样工作：

$(document.body)
  .on("mouseover", "p", function() {})
  .on("mouseout", "p", function() {});

您必须使用mouseover和mouseout事件，因为hover不支持具有两个单独回调函数的.on()（至少这不是我最后一次检查）。

理想情况下，您不会在此代码中使用document.body，但会使用一些非动态的公共父元素（它已经存在并保留在那里）并且在层次结构中与一样接近您正在监控的标签。这使得过多的事件不必一直冒泡到文档级别，并有助于提高性能。

Answer 2

如果可能的话，使用:hover伪类我会用CSS而不是javascript来解决这个问题。

p { /* some css */ }
p:hover { /* hover css */ }

如果你必须使用javascript，请参阅jfriend00的答案。我最初有一个类似于他的答案，但是jfriend的更快更好。对于其他人，我会把它作为一个注释留下来。

Answer 3

您需要使用on（jQuery 1.7）或live函数，它会将事件附加到页面加载后创建的元素

$("p").on("hover", function()) {
....
}

jQuery在innerHTML中不起作用

3 个答案: