Question

我正在使用一个功能将图像添加到网站。这些进入DIV，使用.html（）在完成之后，我需要那些相同的图像来显示对悬停的影响，但是当我将它们悬停时没有任何反应。如果我键入我在.html（）函数中使用的相同代码，相同的类等，hover工作。

经过多次尝试，我把问题缩小到这个样本。原来问题是容器DIV如何暴露通过.html（）添加的代码...而我的悬停函数找不到动态添加的标签。

这是我的示例代码：

<html>
<head>
<title>Problems</title>
<script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<p id="TXToldone">This line was already here</p>
<div id="DIVnewone"></div>
<script>

function createnewone(){
   $txthtml="<p id=\"TXTnewone\">And this one got added dynamically</p>";
   $("#DIVnewone").html($txthtml);
};
$(document).ready(function() {
   createnewone();
}); 
$("*").on("click", function(){
   alert( $(this).attr("id") );
});

</script>
</body>
</html>

备注： - 这只是我真正问题的一个原始例子。这不是我的意思    实际上试图完成，但解决这个问题会让我失望    解决真实问题;）
- 前两个函数来自实际代码......文档之后    准备好了我加载图片并递归添加所需的html    每个DIV ......
- 第三个功能只是让你们可以看到我的问题......它应该    显示一个警报，其中包含您单击的元素的ID（以及它    对于第1段而言）...但是检查点击时会发生什么    第二个......你没有看到该段落的ID而是ID    而是用于容器DIV！
- （是的，它还会向其他父母发出警告，直至文件，    但是，嘿，这只是一个例子）
- 如果我手动将段落添加到同一个DIV，“静态”    段落时会显示其ID，但“动态”仍然显示    显示DIV ID。

请指教？
（另外，我需要脚本留在我的代码的底部，所以它可以“看到”所有的图片）

编辑所以我的观点更清楚：我需要一种方法将内容添加到DIV，以便其他函数看到新代码。

你们如何替换这一行，以便示例代码按预期工作？

$("#DIVnewone").html($txthtml);

Answer 1

您可能正在寻找live()功能。

在jQuery 1.7之后的

或on()

说明
为当前和未来的匹配当前选择器的所有元素附加事件处理程序。

Answer 2

将悬停功能放在添加动态内容的事件调用中。您的悬停功能在添加内容之前正在评估，之后不会重新评估，导致它们为undefined。

修改
罗伯特哈维的回答比这要好得多，但这个想法是一样的。

Answer 3

您是否尝试将新元素附加到div而不是通过html（）进行设置，但我相信.html（）也可以正常工作。

function createnewone(){
   $txthtml="<p id=\"TXTnewone\">And this one got added dynamically</p>";
   $("#DIVnewone").append($txthtml);
};

然后你可以使用下面的ON功能（1.7+）来完成当鼠标悬停在选择器（'#TXTnewone'）上时你需要做的事情。请注意，下面将需要进入“$(document).ready(function() { ...here... }”函数，这是为了确保在为其分配on事件时已加载“body”标记。

$(document).ready(function() {
    createnewone();
    $("body").on(
        {
              mouseenter: function () { $(this).css("color","red"); }
            , mouseleave: function () { $(this).css("color","black"); }
        }
        , "#TXTnewone"
    );
});

以上是上述工作的jsFiddle。

我如何重用JQuery动态标签？

3 个答案: