单击事件对动态生成的元素无效[重复]

作者
这个问题在这里已经有答案了：
动态创建元素上的事件绑定？

（23个答案）

四年前关闭的 

&lt；html&gt；
&lt；头&gt；
&lt；script type=“text/javascript”src=”https://stackoverflow.com/questions/6658752/jquery.js“&gt&lt/脚本&gt；
&lt；script type=“text/javascript”&gt；
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“h2”）.html（“&lt；p class='test'&gt；单击我&lt；/p&gt；”）
});   
$（“.test”）。单击（函数（）{
警惕（）；
});
});
&lt/脚本&gt；
&lt/头&gt；
&lt；车身&gt；
&lt；h2&gt&lt/h2&gt；
&lt；按钮&gt；生成新元素&lt/按钮&gt；
&lt/车身&gt；
&lt/html&gt；

我试图在&lt；h2&gt通过单击按钮。我还定义了一个与test关联的点击事件。但这项活动不起作用

有人能帮忙吗

您正在使用的click（）绑定称为“直接”绑定，它只将处理程序附加到已存在的元素上。它不会绑定到将来创建的元素。为此，您必须使用（）上的创建一个“委托”绑定

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中

来源

以下是您要查找的内容：

var counter=0；
$（“按钮”）。单击（函数（）{
$（“h2”）。追加（&lt；p class='test'&gt；单击我“+（++counter）+”&lt；/p&gt；）
});
//带on（）
$（“h2”）。在（“单击”，“p.test”，函数（）上{
警报（$（this.text（））；
});
&lt；脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js“&gt&lt/脚本&gt；
&lt；h2&gt&lt/h2&gt；
&lt；按钮&gt；生成新元素&lt/按钮&gt

以上内容适用于使用jQuery版本1.7+的用户。如果您使用的是旧版本，请参考下面的上一个答案

先前的答案：

尝试使用live（）：

$（“按钮”）。单击（函数（）{
$（“h2”）.html（“&lt；p class='test'&gt；单击我&lt；/p&gt；”）
});   
$（“.test”）.live（'单击'，函数（））{
警惕（“你点击了我！”）；
});

为我工作。用jsFiddle试过了

或者有一种新的方法可以通过delegate（）：

$（“h2”）。委托（“p”，“单击”，函数（）{
警惕（“你又点击我了！”）；
});

更新的JSFIDLE

相关文章：

  1. 如何在jQuery中选择具有多个类的元素？
  2. 如何在jQuery中选择具有多个类的元素？
  3. 如何使用jQuery获取元素的ID？
  4. 在jQuery中删除事件处理程序的最佳方法是什么？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with