今天遇到一个jquery bind 重复绑定事件问题。当点击“设置”连接是,弹框打开,点击添加按钮,提示“添加成功”,关闭弹窗,再次点击“设置”打开弹窗,点击“添加”,弹出两次“添加成功”,以此类推,在不刷新或重新打开设置所在页面时,弹框的次数跟关闭重新打开弹窗的次数相同,
“设置”超链接,用于打开编辑dialog弹窗。(在点击“设置”时,每次打开弹窗,opensheji方法代码都将被执行,为addskuinfo绑定click事件。)
<a style="color:#403AF2;text-decoration: underline" href="javascript:void(0);" οnclick="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("添加成功");
});
});
“设置”超链接,用于打开编辑dialog弹窗。(在点击“设置”时,每次打开弹窗,opensheji方法代码都将被执行,为addskuinfo绑定click事件。)
<a style="color:#403AF2;text-decoration: underline" href="javascript:void(0);" οnclick="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("添加成功");
});
});