多次加载 $(document).on('click', `#${this.options.specTableElemId} .fairy-spec-create`, function () {})后,点击会执行多次
时间: 2024-03-02 21:53:32 浏览: 88
这个问题可能是因为你多次绑定了相同的事件处理函数。可以通过以下方法解决:
1. 在绑定事件之前先解绑之前的事件处理函数,避免重复绑定。
```
$(document).off('click', `#${this.options.specTableElemId} .fairy-spec-create`).on('click', `#${this.options.specTableElemId} .fairy-spec-create`, function () {});
```
2. 使用`one`方法,只绑定一次事件。
```
$(document).one('click', `#${this.options.specTableElemId} .fairy-spec-create`, function () {});
```
这样就可以避免多次执行事件处理函数的问题了。
相关问题
多次加载 $(document).on('click', #${this.options.specTableElemId} .fairy-spec-create, function () {})后,点击会执行多次
这个问题可能是因为你多次绑定了相同的事件处理函数。可以通过以下方法解决:
1. 在绑定事件之前先解绑之前的事件处理函数,避免重复绑定。
```
$(document).off('click', `#${this.options.specTableElemId} .fairy-spec-create`).on('click', `#${this.options.specTableElemId} .fairy-spec-create`, function () {});
```
2. 使用`one`方法,只绑定一次事件。
```
$(document).one('click', `#${this.options.specTableElemId} .fairy-spec-create`, function () {});
```
这样就可以避免多次执行事件处理函数的问题了。
this.data.upload = upload.render({ elem: '.fairy-sku-img', bindAction: '#id-upload-skus')多次实例化后,全部文件上传成功的回调allDone事件会多次触发
是的,因为每次实例化上传组件都会绑定一个独立的 `allDone` 事件回调函数,所以当所有上传组件都上传完毕后,每个上传组件绑定的 `allDone` 事件回调函数都会被触发一次,导致回调函数多次执行。
解决这个问题的方法与前面类似,可以使用一个计数器来记录所有上传组件的上传状态,当所有上传组件都上传完毕后,再执行最终的回调函数。具体代码如下:
```javascript
var uploadCount = 0; // 计数器,记录已经上传完毕的上传组件数量
// 实例化上传组件
this.data.upload = upload.render({
elem: '.fairy-sku-img',
bindAction: '#id-upload-skus',
allDone: function(res) {
// 计数器加一
uploadCount++;
// 判断是否所有上传组件都已经上传完毕
if (uploadCount === uploadInstances.length) {
// 执行所有上传组件都上传完毕后的回调函数
handleAllUploadCallback();
}
}
});
// 所有上传组件都上传完毕后的回调函数
function handleAllUploadCallback() {
// TODO: 处理所有上传组件上传完毕后的逻辑
}
```
这样,在多次实例化上传组件的情况下,每个上传组件上传完毕后都会将计数器加一,当所有上传组件都上传完毕后,就会执行最终的回调函数。并且,由于只有一个 `allDone` 事件回调函数被绑定到了上传组件的父元素上,所以不会出现多次触发回调函数的情况。
阅读全文