给DOM操作生成的元素添加事件

问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件。

常见例子:在处理表格的时候,每行行末有个删除按钮,如下图。点击删除按钮的时候删除这一行。

//html部分
<table border="" cellspacing="" cellpadding="" class="text-center">
<caption class="text-center">用户信息表</caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>
<a class="deltr">删除</a>
</td>
</tr>
</table>
<button class="btn btn-info">添加</button> //js部分
$(function() {
$("button").on("click", function() {
$("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a class="deltr">删除</a></td></tr>');
})
$(".deltr").on("click", function() {
$(this).parents("tr").remove();
})
})

给DOM操作生成的元素添加事件

如果上图中的删除按钮在dom操作前就在页面中的话,给其添加是可以的;如果表格中的每行都是通过dom操作添加的话,可以发现,删除按钮上却没有绑定任何事件。那么要怎么做才可以给dom生成的元素添加事件呢?

方法一:onclick法

$(function() {
  $("button").on("click", function() {
    $("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a onclick="deltr(this)">删除</a></td></tr>');
  }) })
function deltr(delbtn){
  $(delbtn).parents("tr").remove()
}

 ps:该方法没有实现结构与行为分离的准则。关于dom操作添加事件一般采用的都是该方法。

 注意:此时的deltr这个function必须是全局函数,得放在$(function(){})外面,放里面就成局部函数了,html里的onclick就调用不到了。

方法二:DOM 生成事件后绑定

  在dom操作生成元素之后,添加事件。如下

$(function() {
  $("button").on("click", function() {
    $("table").append('<tr><td>2</td><td>张三</td><td>男</td><td>18</td><td><a>删除</a></td></tr>');
$("table a").on("click",function(){
deltr($(this));
})
  }) })
function deltr(delbtn){
  $(delbtn).parents("tr").remove()
}

方法三: 事件委托

$("body").on("click", "table a", function(){
  deltr($(this));
})

  

运行此段代码,会发现功能根本无法实现。这是因为此时函数内的 this 指向 body;

$("body").on("click", "table a", function(e){
  if(e.target.nodeName = "a"){
console.log($(this))
}
})

因为事件是冒泡的,所以我们要阻止冒泡到 body 之前,使用 e.target 截取到触发事件的元素上。

上一篇:【BZOJ2594】【WC2006】水管局长


下一篇:[转]Ubuntu上的包管理:dpkg,apt和aptitude