jquery添加未来元素时，其绑定事件不起作用解决办法

delegate说起对未来元素是其作用的，于是写下代码：

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>知几 - 教师端</title><meta name="description" content=""><link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png"><script type="text/javascript" src="jquery.min.js"></script>
</head><body><p class="xxx">click</p>
<div id="a"></div>
<li class="add_reason"><span>xx</span></li><script type="text/javascript">
$(".xxx").click(function(){$("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>');
})$(".add_reason").delegate("span", "click",function(){alert("ddd");
});
</script></body>
</html>

其实不然，对与通过点击xxx元素新加的html，根本没有作用。

错误：页面出现动态添加元素时，添加元素的事件用普通的方法，无法响应。

原因：普通添加的事件，只是在document.ready时绑定的已有元素事件，所以动态添加的元素，在document.ready时不存在，所以也无法绑定元素事件，无法对事件进行响应。

这时候，需要用到上面的三个绑定方法；这三个方法只所以成功，是因为这三个方法是绑定到document上，如果元素发生变化，也都是从document开始找，动态添加的元素也能被重新查找时所发现，所以事件能够响应。换成如下代码，成功执行：

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>知几 - 教师端</title><meta name="description" content=""><link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png"><script type="text/javascript" src="jquery.min.js"></script>
</head><body><p class="xxx">click</p>
<div id="a"></div>
<li class="add_reason"><span>xx</span></li><script type="text/javascript">
$(".xxx").click(function(){$("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>');
})$(document).on('click', '.add_reason',function() { alert("2");
});
</script></body>
</html>

完毕。

转载于:https://www.cnblogs.com/zl0372/p/jquery.html

jquery添加未来元素时，其绑定事件不起作用解决办法相关推荐

jQuery on()方法绑定动态元素的点击事件无响应的解决办法
$('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...
【JQ】动态添加的元素无法触发绑定事件的解决办法
情景如上面的模态框,点击左边的添加按钮,会把整个div添加到右边,点击右边的删除按钮,则把整个div添加回左边,就类似于穿梭框的样子. 不难,下面是一开始想到的方案: $('#SelectedDev ...
html 元素响应,jQuery动态添加html元素后，响应事件的问题记录
var li = " " + "" + // 缩略图点击部分 index='" + i + "' "" + " ...
jQuery添加插入元素技巧
1.jQuery添加插入元素技巧有两种:指定元素的里面和外面 2.里面添加: 里面的前面添加:prepend.prependTo: 里面的后面添加:append.appendTo: 3.外面添加: 外 ...
jquery 添加插入元素技巧前面和后面
jquery添加插入元素技巧: jquery添加分为在指定元素的里面添加和外面添加两种: 里面添加使用(append 和prepend) 里面添加又分为在里面的前面添加和后面添加里面的前面添加使用 ...
jq增加删除html标签,jQuery添加\删除元素
jQuery添加\删除元素 html> jquery添加和删除元素 $(function(){ //添加元素 //元素内部添加 //append()在被选元素的结尾插入内容; // $('but ...
Git在添加目录时遇到了Fatal: unpopulated submodule的解决办法
Git在添加目录时遇到了Fatal: unpopulated submodule的解决办法今天,在把以前的一个目录整体拷贝到git的目录下时,在add的时候遇到了报错,提示unpopulated s ...
mysql 启动安全模式_“ Word上次启动时失败，以安全模式启动Word ....”解决办法...
" Word上次启动时失败,以安全模式启动Word ...."解决办法 Word上次启动时失败,以安全模式启动word将帮助您纠正或发现启动中的问题,下一次成功启动应用程序.但是 ...
移动端html右滑空白,BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法...
最近的一个项目前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽).一直在Chrome的仿真机测试 ...

jquery添加未来元素时，其绑定事件不起作用解决办法

jquery添加未来元素时，其绑定事件不起作用解决办法相关推荐

最新文章

热门文章