今天遇到一个jquery bind 重复绑定事件问题。当点击“设置”连接是,弹框打开,点击添加按钮,提示“添加成功”,关闭弹窗,再次点击“设置”打开弹窗,点击“添加”,弹出两次“添加成功”,以此类推,在不刷新或重新打开设置所在页面时,弹框的次数跟关闭重新打开弹窗的次数相同,
“设置”超链接,用于打开编辑dialog弹窗。(在点击“设置”时,每次打开弹窗,opensheji方法代码都将被执行,为addskuinfo绑定click事件。)
<a style="color:#403AF2;text-decoration: underline" href="javascript:void(0);" onclick="productmanage(${h.sid},${subjectsid},${h.subType});">设置</a>
位于编辑dialog弹窗内的一个操作按钮“添加”。(在点击“添加”时,绑定click事件代码会被执行。进行添加操作)
<td style="width: 10px;" align="left"><input type="button" value="添加" id="addskuinfo"/></td>
function opensheji(subModuleRefSid,subjectsid) {
//选中商品添加到明细table中
$("#addskuinfo").bind("click", function () {
var ids = [];
var rows = $("#skuColorInfo").datagrid('getSelections');
var skuColorInfoDetail_rows = $("#skuColorInfoDetail").datagrid('getRows');
var skuColorInfoDetail_rows_length = skuColorInfoDetail_rows.length;
for (var i = 0; i < rows.length; i++) {
var de_sid = rows[i].CATENTRY_ID;
ids.push(rows[i].CATENTRY_ID);
if (skuColorInfoDetail_rows_length > 0) {
var new_de_sid = [];
//遍历下面存在的数据,赋值给new_de_sid
for (var j = 0; j < skuColorInfoDetail_rows_length; j++) {
new_de_sid.push(skuColorInfoDetail_rows[j].CATENTRY_ID);
}
//确定de_sid在数组中new_de_sid的位置(如果没有找到则返回 -1 )。
//没找到就添加一个
if (jQuery.inArray(de_sid, new_de_sid) == -1) {
skuColorInfoDetail_datagrid = skuColorInfoDetail_datagrid.datagrid("appendRow", rows[i]);
}
} else {
skuColorInfoDetail_datagrid = skuColorInfoDetail_datagrid.datagrid("appendRow", rows[i]);
}
}
alert("添加成功");
});
});
上述问题原因:当“设置”所在页面不被重新加载时,多次点击“设置”操作,addskuinfo将被多次绑定click时间----重复绑定事件。
上述问题现象:当“设置”所在页面不被重新加载时,多次点击“设置”操作,多次弹出“添加成功”提示。
上述问题解决方法:每次重新加载“设置页面”;或者在每次点击“设置”操作初始化绑定时间代码时,首先取消绑定click事件(unbind('click')),再次绑定click时间,即可将操作前绑定的click时间取消绑定,确保事件唯一性
代码如下:
function opensheji(subModuleRefSid,subjectsid) {
//选中商品添加到明细table中
$("#addskuinfo").unbind("click").bind("click", function () {
var ids = [];
var rows = $("#skuColorInfo").datagrid('getSelections');
var skuColorInfoDetail_rows = $("#skuColorInfoDetail").datagrid('getRows');
var skuColorInfoDetail_rows_length = skuColorInfoDetail_rows.length;
for (var i = 0; i < rows.length; i++) {
var de_sid = rows[i].CATENTRY_ID;
ids.push(rows[i].CATENTRY_ID);
if (skuColorInfoDetail_rows_length > 0) {
var new_de_sid = [];
//遍历下面存在的数据,赋值给new_de_sid
for (var j = 0; j < skuColorInfoDetail_rows_length; j++) {
new_de_sid.push(skuColorInfoDetail_rows[j].CATENTRY_ID);
}
//确定de_sid在数组中new_de_sid的位置(如果没有找到则返回 -1 )。
//没找到就添加一个
if (jQuery.inArray(de_sid, new_de_sid) == -1) {
skuColorInfoDetail_datagrid = skuColorInfoDetail_datagrid.datagrid("appendRow", rows[i]);
}
} else {
skuColorInfoDetail_datagrid = skuColorInfoDetail_datagrid.datagrid("appendRow", rows[i]);
}
}
alert("添加成功");
});
});
分享到:
相关推荐
在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`或`attachEvent`方法,而jQuery提供了一套统一且便捷的API来处理这一任务。 首先,我们需要了解什么是事件。在Web开发中,事件是用户与...
`.off()`用于移除事件,`.on()`用于添加事件。这在jQuery 1.7及以上版本中推荐使用: ```javascript function reg_button_click() { $("#button").off('click').on('click', function() { alert("button click"); ...
文章中提到的“循环绑定事件”是指在一个for循环中,根据数组中的元素数量,动态地为每个元素添加事件监听器。这在处理一组相似的元素,如按钮、图片等时尤其有用。 在文章的内容部分,作者给出了一个具体的实现...
jQuery通过 `$` 符号来选择元素,然后绑定事件监听器,如 `click` 事件,当用户点击元素时触发特定的函数。 例如,假设我们有一个商品列表,每个商品都有一个“添加到购物车”的按钮,我们可以这样编写jQuery代码:...
- 当使用`.on()`绑定事件时,可以考虑使用事件代理,特别是在处理动态添加的元素时,可以提高性能并避免重复绑定。 - 对于大型项目,保持良好的代码组织和模块化,避免全局函数的滥用,可以有效防止无意中重复绑定...
例如,`$('table').on('click', 'tr', function() {...})`,即使表格中的行是在事件绑定后添加的,点击行也会触发事件处理函数。 5. **事件分离** 使用`off()`方法可以解除事件绑定,以避免内存泄漏。例如,`$("#...
在探讨jQuery中元素重复绑定的问题之前,我们需要了解事件绑定在jQuery中的基本原理。在jQuery中,事件可以通过bind()方法绑定到指定的元素上。比如,当我们使用$('.test').bind('click', function() {...})时,意指...
这些方法用于为DOM元素添加事件监听器,当特定事件发生时执行相应的函数。 #### 三、重复绑定事件的后果 在实际开发过程中,可能会出现由于疏忽或代码逻辑复杂导致的重复绑定事件的情况。这种情况会导致以下几个...
4. **避免重复绑定**:确保在DOM元素只绑定一次事件,避免在不同地方重复相同的绑定代码。 5. **解除绑定**:在不再需要事件处理时,使用`off()`方法解除绑定,释放内存。 6. **使用事件对象**:传递事件对象`e`到...
原绑定方法: ...这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑
"ssh2 jQuery Validator验证重复添加"这个主题可能涉及到在使用jQuery Validator时遇到的一个问题,即在同一个表单或多个表单中多次添加相同的验证规则,可能导致不必要的复杂性或者错误。这可能是因为开发者在编写...
事件绑定是jQuery的核心功能之一,它允许开发者为元素添加事件监听器,以便在特定事件发生时执行某些操作。在jQuery中,我们常用的事件绑定方法有`.click()`, `.bind()`等。这些方法都是将事件处理器直接绑定到指定...
当绑定的事件处理器被执行一次之后,该处理器会自动被移除,这有助于防止事件处理器的重复绑定和潜在的内存泄漏问题。one() 方法在 jQuery 1.4 中首次引入,并且在新版本的 jQuery 中依然有效。 在实际开发中,我们...
首先,jQuery重复加载可能导致的错误类型主要有两种: 1. **命名空间冲突**:由于jQuery全局变量`$`和`jQuery`会被重新定义,可能导致先前基于旧版本jQuery编写的代码失效。 2. **事件绑定丢失**:如果新的jQuery...
使用`.off()`方法可以解除事件绑定,以避免内存泄漏或重复处理。例如,解除所有点击事件: ```javascript $('#myButton').off('click'); ``` ### 六、事件对象的其他属性和方法 - `event.delegateTarget`: 事件...
同时,为了防止重复添加,可能还需要对已添加的标签进行检查。 在删除标签的实现中,jQuery的`.click()`事件可以用来监听每个标签元素的点击行为。当用户点击某个标签时,触发的函数会移除该元素,可能还会更新...
2. **jQuery绑定事件**:接下来,我们需要使用jQuery绑定键盘事件,特别是监听回车键(keycode 13)。当用户按下回车时,获取输入框中的文本,然后进行处理。 ```javascript $(document).ready(function() { $('#...
本文将详细探讨JQuery中DOM事件绑定的用法,重点关注其bind方法的使用技巧,并通过实例来说明其效果。 首先,我们来看看bind方法的基本用法。JQuery中的bind方法用于为匹配的元素集合中的每个元素绑定一个或多个...
8. **用户体验优化**:为了让用户体验更佳,可以添加一些额外的功能,如验证输入、提供默认样式、处理重复的tab等。 在提供的"FramesetTest"文件中,可能包含了实现上述功能的示例代码或测试框架,可以进一步研究以...
`bind`用于添加事件处理器,而`unbind`用于移除它们。理解并熟练掌握这些方法对于编写高效、可维护的jQuery代码至关重要。在实际项目中,根据需求选择合适的事件绑定和解除绑定方法,可以使代码更加简洁,提高用户...