Javascript jQuery在innerHTML中不起作用

下面是jQuery函数，它在p元素悬停时改变CSS

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

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

$（“#div”）.html（“悬停时需要高亮显示的内容”
”；

即使我尝试像这样将函数本身插入到innerHTML中

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

$（'#div'）.append（'$（'p'）.hover（function（）{$（this.addClass（“choice”）；}，function（）{$（this.removeClass（“choice”）；）；

对于该div的HTML内容，它仍然不起作用

我错过了什么？谢谢，如果您有任何帮助，我们将不胜感激。

当您编写

$（“p”）。悬停
，它对文档的当前状态进行一次性搜索，查找所有
标记及其附加的事件处理程序。它不会将事件处理程序附加到将来添加到文档中的
标记

如果希望为将来的
标记使用事件处理程序，则需要使用
.delegate（）
（对于jQuery 1.7之前的版本）或
.on（）
（对于jQuery 1.7+）

使用jQuery 1.7+，它的工作原理如下：

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

您必须使用mouseover和mouseout事件，因为
.on（）
不支持带有两个单独回调函数的
悬停（
）（至少上次检查时不是这样）

理想情况下，您不会在这段代码中使用document.body，而是使用一些非动态的公共父元素（它已经存在并保持在那里），并且在层次结构中尽可能接近您正在监视的
标记。这可以避免太多事件一直冒泡到文档级别，并有助于提高性能。
当您编写
$（“p”）时。悬停
，对文档的当前状态进行一次性搜索，查找所有
标记和附加的事件处理程序。它不会将事件处理程序附加到将来添加到文档中的
标记

如果希望为将来的
标记使用事件处理程序，则需要使用
.delegate（）
（对于jQuery 1.7之前的版本）或
.on（）
（对于jQuery 1.7+）

使用jQuery 1.7+，它的工作原理如下：

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

您必须使用mouseover和mouseout事件，因为
.on（）
不支持带有两个单独回调函数的
悬停（
）（至少上次检查时不是这样）

理想情况下，您不会在这段代码中使用document.body，而是使用一些非动态的公共父元素（它已经存在并保持在那里），并且在层次结构中尽可能接近您正在监视的
标记。这可以避免太多事件一直冒泡到文档级别，并有助于提高性能。
您需要使用on（jQuery 1.7）或live函数，该函数将事件附加到页面加载后创建的元素

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

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

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

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

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

如果必须使用javascript，请参阅jfriend00的答案。我本来有一个和他的答案相似的答案，但是jfriend的答案更快更好。不过，我会把这件事留给其他人注意。
如果可能的话，我会用CSS而不是javascript来解决这个问题，使用
：hover
伪类

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

如果必须使用javascript，请参阅jfriend00的答案。我本来有一个和他的答案相似的答案，但是jfriend的答案更快更好。不过，我会将此作为备忘留给其他人。
这相当于他的代码。当选择器未传递到
上的
时，其工作原理与
悬停
相同。这相当于他的代码。当选择器未传递到
上的
时，其工作原理与
悬停
相同。我希望您在实际代码中没有使用
“#div”
，因为这很容易让人困惑。使用
“div”
或
“usefulname”
。使用
id=“div”
会造成混乱。我希望您在实际代码中没有使用
“#div”
，因为这很容易让人困惑。使用
“div”
或
“usefulname”
。使用
id=“div”
会造成混乱。好主意。如果你能用纯CSS来做，那几乎总是比编码JS好。事实上，我想这就是我要处理悬停的方法。谢谢你的提醒。好主意。如果你能用纯CSS来做，那几乎总是比编码JS好。事实上，我想这就是我要处理悬停的方法。谢谢你的提醒，谢谢大家。这种方法是可行的，但是由于某种原因，.on（）不起作用，但是.live（）起作用了。@Scott-
.live（）
已被所有版本的jQuery弃用。你不应该使用它。您应该使用
.on（）
或
.delegate（）
。如果您显示您正在添加的
标记周围的实际HTML，我们可以帮助您精确地查询
.on（）
。这就是我现在所做的，我选择CSS来处理悬停，我想现在使用.on（）来处理click事件，下面是使用.live（）的方法<代码>$（'.select'）.live（“单击”，函数（）{$（'.select'））.find（'.select'）.removeClass（“选择”）；$（this.addClass（“选择”）；}）和
$（'#结果'）。追加（'label'）
on（）
相当于
$（'.select'）.live（“click”，function（）{}）
是：
$（document.body）。on（'click'，'.select'，function（）{}）。您可以先尝试验证它是否有效，但如果您在靠近
的
document.body
之外选择父对象，则性能会更好。选择
对象，但