html追加元素没有点击事件,jquery html 动态添加元素绑定事件

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

点击表格每一行，弹出消息提醒。如果我们用js给表格添加一行，新添加的行点击事件失效。

当需要的内容还没有被插入时，选择器只会选择页面中已经存在的元素，所以事先没有存在元素是绑定不了事件的。

动态添加元素绑定事件

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;

}

添加一行

昵称	年龄	性别
东方不败	17	女
西方不败	24	男

function addTr(){

var html = '

'+

'

南方不败'+

'

19'+

'

男'+

'

';

$('table').append(html);

}

//按钮“添加一行”，添加的数据不会执行该事件

$('table tr#tr_id').click(function(){

alert('点击了');

});

//undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来

//向匹配元素的当前或未来的子元素附加一个或多个事件处理器

//按钮“添加一行”，添加的数据会执行该事件

/*$("table").delegate("tr#tr_id", "click", function () {

alert('点击了');

});*/