实际场景
在一个网盘页面添加新建文件夹,确定后,在页面里追加元素。如果直接使用click()
或bind()
会出现加载页面时不存在的元素(也就是后来追加到页面的元素)没有绑定点击事件。
在页面新生成的文件夹,却没有点击事件,也就是我无法框选它等等。
解决方法
- 使用
.on(events, selector, callback)
解决
events:监听的事件
selector:绑定事件的元素
callback:事件触发的回调函数
举个例子
fileBody.on('click', 'tr', function () {
if (!$(this).hasClass('tr-hover')) {
// 增加选中样式
$(this).addClass('tr-hover');
$(this).find('span').addClass('tr-click');
i++;
} else {
// 移除选中样式
$(this).removeClass('tr-hover');
$(this).find('span').removeClass('tr-click');
i--;
}
// 网盘具体功能的显示隐藏
i > 0 ? $('.btn-group').css('display', '') : $('.btn-group').css('display', 'none');
i > 1 ? $('.newName').addClass('disabled') : $('.newName').removeClass('disabled');
});
其中fileBody
是tr
的父级元素。
- 使用
.live()
解决 不建议已被废除
感谢小武不杀之恩,为了写博客,我们又被暴雨困在B9了。