jquery html 动态添加元素绑定事件

点击表格每一行，弹出消息提醒。如果我们用js给表格添加一行，新添加的行点击事件失效。
当需要的内容还没有被插入时，选择器只会选择页面中已经存在的元素，所以事先没有存在元素是绑定不了事件的。

参考：jquery html 动态添加元素绑定事件

<html><head><title>动态添加元素绑定事件</title><style>table{border-collapse: collapse;  /**设置小表格之间的间距为0*/border-right:1px solid red;border-top:1px solid red;}table tr td{border-left:1px solid green;border-bottom:1px solid green;}</style><script src="http://code.jquery.com/jquery-1.11.3.js"></script></head><body><br/><button onclick="addTr()">添加一行</button><br/><br/><table><tr><td>昵称</td><td>年龄</td><td>性别</td></tr><tr id="tr_id"><td>东方不败</td><td>17</td><td>女</td></tr><tr id="tr_id"><td>西方不败</td><td>24</td><td>男</td></tr></table></body>
</html>
<script>function addTr(){var html = '<tr id="tr_id">'+'<td>南方不败</td>'+'<td>19</td>'+'<td>男</td>'+'</tr>';$('table').append(html);}//按钮“添加一行”，添加的数据不会执行该事件$('table tr#tr_id').click(function(){alert('点击了');});//undelegate()   从匹配元素移除一个被添加的事件处理器，现在或将来//向匹配元素的当前或未来的子元素附加一个或多个事件处理器//按钮“添加一行”，添加的数据会执行该事件/*$("table").delegate("tr#tr_id", "click", function () {alert('点击了');});*/
</script>

jquery html 动态添加元素绑定事件相关推荐

JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
JQuery动态循环绑定事件
有时需要根据业务需要动态绑定事件,比如需要从根据从数据库中查出来的链接名称和URL,将这些信息放到标签中,数据库中的数据量是变化的,要在前端循环遍历数据,并进行事件绑定使用方法:$(标签).bind ...
【JQuery】on/off 绑定事件和解绑事件
前言 on 绑定事件.off 解绑事件 on 添加事件.off 删除事件 JQuery on() 方法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 ...
Jquery的on方法绑定事件
$(selector).on('events',fn) events:一个或多个用空格分隔的事件类型 selector:元素的子元素选择器 fn:回调函数,即绑定在元素身上的侦听函数 1.on方法可以 ...
jQuery删除动态添加元素
jquery 在刪除元素 $("#btn_removeAll").click(function(){$("#userTbody tr").remove() }) ...
解决jquery的多次绑定事件
最近在写一个网站的过程中,混合使用了updatepanel与jquery,发现只要updatepanel刷新一次,执行事件的次数就会加一,将代码改为如下解决: $("#btnLocation ...
对jquery新增加的class绑定事件 jquery 对相同class 绑定事件
当页面加载时,就会注册所有的事件,后面通过jquery新增的内容(<div class="item"></div>),再对新增的添加事件$(".i ...
jQuery：删除元素绑定事件
$('#page21MainContain').css("pointer-events", "none");
jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定事件的解决方案. 参考文章: (1)jquery动态添加元素无法触发绑定事件的解决方案. (2)https://www.cnblogs.com/momozjm/p/ ...
jQuery Dom 操作，动态生成dom，绑定事件
1.获取内容 - text().html()以及val() text()-设置货返回所选的元素的文本内容:$("#text").text(); html()- 设置或返回所选元素的 ...

jquery html 动态添加元素绑定事件

jquery html 动态添加元素绑定事件相关推荐

最新文章

热门文章