我就是用的ID选择器,是不同的选择器,只是两个选择器属于包含关系
时间: 2023-07-17 20:10:14 浏览: 32
如果你使用了不同的 ID 选择器,并且这两个选择器属于包含关系(即一个选择器是另一个选择器的父级元素),那么绑定在父级元素上的事件处理程序和绑定在子级元素上的事件处理程序都会被触发。
这是因为在 ZUI 框架中,事件处理程序会按照事件冒泡的原则进行触发。当你打开外层模态框时,内层模态框也会被显示,导致外层模态框的父级元素也会触发相应的事件。因此,父级元素上绑定的事件处理程序和子级元素上绑定的事件处理程序都会被调用。
为了避免这种情况,你可以使用 `stopPropagation()` 方法阻止事件冒泡,或者更精确地指定目标模态框的选择器。
以下是一个示例来说明这个情况:
```javascript
$('#outerModal').on('shown.zui.modal', function (event) {
event.stopPropagation();
console.log('外层模态框已经显示完成');
// 执行其他操作
});
$('#innerModal').on('shown.zui.modal', function () {
console.log('内层模态框已经显示完成');
// 执行其他操作
});
```
在上述代码中,我们使用 `event.stopPropagation()` 方法阻止了事件冒泡,这样在打开内层模态框时,不会再触发外层模态框的事件处理程序。这样,外层模态框的事件处理程序只会在外层模态框上被调用一次,避免了重复调用的问题。
另外,请确保选择器的唯一性,以免将同一个选择器用于多个元素,导致绑定的事件处理程序被重复调用。