【JavaScript】Jquery事件绑定问题

我们所知道的选择器方式，其中有一种方式是属性选择器：

<div style="display: flex; justify-content: space-between;"><!-- 按钮 -->
　　<button btn="listBtn" type="button" style="width: 49%;" class="mui-btn mui-btn mui-btn-danger">预约待确认</button>
　　<button btn="listBtn" type="button" style="width: 49%;" class="mui-btn mui-btn mui-btn-danger mui-btn-outlined">预约已确认</button>
</div>

例如上面的这个HTML：

我对按钮元素设置了一个自定义的属性和值

选择表达式可以这样写：

// 实现动态切换
$('[btn="listBtn"]').on('click', function() {
　　//    todo...
});

意思是我直接通过具备此属性和值的元素来获取

但是这样选择会有一个问题，如果这个元素是需要反复创建销毁的，Jquery将无法绑定到

这是我写渲染列表时给列表中绑定的按钮的一个BUG，初次渲染的列表，按钮元素是存在的，功能正常

但是我删除列表元素重新Ajax请求再渲染时，列表渲染出来了，但是按钮功能失败了。

 

解决办法:

通过所在的父级，或者是上级元素，上级元素要保证是一直存在不会销毁的

$('.list:eq(0)').on('click','[func=cancel]', function(){
　　// todo ...
});