jquery append 动态添加的元素事件on 不起作用的解决方案

前端技术 2023/09/03 JavaScript

用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？on方法中要先找到原选择器（如例.info),再找到动态添加的选择器（如列.delete)。

具体不多说了，请看下面的代码吧。

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<title>测试</title>
<script type=\"text/javascript\"
src=\"../resources/js/jquery-1.11.1.min.js\"></script>
<script type=\"text/javascript\">
$(function(){
//动态添加
$(\".add\").on(\"click\",function(){
console.log(\"进来了\");
$(\".info\").append(\'<div class=\"delete\"><h3>单击我来删除我</h3></div>\');
});
 //对动态添加的元素添加事件-删除
$(\".info\").on(\"click\",\".delete\",function(){
console.log(\"进来了Delete！\");
$(this).remove();
});
 }); 
</script>
 </head>
<body>
 <h2 class=\'add\'>单击我添加动态元素</h2>
 <div class=\"info\"></div>
 </body>
</html>

以上代码就是本文对jquery append 动态添加的元素事件on 不起作用的解决方案，希望对大家学习有所帮助。

本文地址：https://www.stayed.cn/item/7910

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案