我正在使用jqGrid并动态地向网格添加按钮。添加这些按钮后,在gridComplete属性中,我调用我的函数:
function(){
var ids = jQuery("#dataTable").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var cl = ids[i];
$('.ui-loader.ui-corner-all.ui-body-a.ui-loader-default').remove();
$('#create_' + cl).on('click', function() {
var $popUp = $("<div/>").popup({
dismissible : true,
theme : "b",
overlyaTheme : "e",
transition : "pop"
}).on("popupafterclose", function() {
$(this).remove();
}).css({
'width' : '100%',
'height' : '100%',
'padding' : '5px'
})
$("<a>", {
text : "Edit",
}).buttonMarkup({
inline : false,
mini : true,
}).on("click", function() {
$popUp.popup("close");
$('#dataTable').jqGrid('editGridRow', cl);
}).appendTo($popUp);
$("<a>", {
text : "Delete"
}).buttonMarkup({
inline : false,
mini : true,
}).on("click", function() {
$popUp.popup("close");
}).appendTo($popUp);
$popUp.popup('open').trigger("create");
});
}
除了一个问题外,工作正常。似乎动态按钮都接收相同的功能(单击第一行中的按钮调用应该为最后一行调用的内容,单击第二个按钮调用最后一行的功能等...) 所以我似乎无法动态分配onclick到一大组按钮。当我想到它时,我开始认为应该可以通过这种方式为每个按钮分配点击方法,但我不太确定,因为我是jquery / jqgrid的新手。有没有什么办法解决这一问题?
以下是添加按钮的代码:
function displayButton(cellvalue, options, rowObject){var act = "<div id='page_" + options.rowId + "'> <a href='#' data-role='button' id='create_"+ options.rowId +"'>Create a popup</a></div>"
return act; return act;}
由jqgrid行的模型调用。
formatter: displayButton
答案 0 :(得分:0)
问题是在处理函数中使用的变量cl
绑定到函数外部声明的同一变量。在迭代循环时,cl
的值会发生变化,但您添加的函数不会更改。
循环内部变量闭包的错误是一个常见的Javascript编程问题,您需要在循环内声明函数时随时查看。没有&#34;块范围&#34;在Javascript中(如在Java中),只有&#34;函数范围&#34;。
基本上,模式:
for (var i=0; i<len; i++) {
foo.on('click', function() {
console.log(i);
});
}
将始终对i
使用相同的值 - 循环中的最后一个值。这几乎总是不是程序员想要的,并且可以通过这种修改来修复:
for (var i=0; i<len; i++) {
foo.on('click', (function(bound_i) {
return function() {
console.log(bound_i);
};
})(i));
}
在这种情况下,循环的每次迭代都会创建一个新函数,其i
的值不同,绑定到变量bound_i
)。
将此模式应用于我看到此问题的代码:
....
.on("click", function() {
$popUp.popup("close");
$('#dataTable').jqGrid('editGridRow', cl);
})
....
变为
....
.on("click", (function(bound_cl) {
return function() {
$popUp.popup("close");
$('#dataTable').jqGrid('editGridRow', bound_cl);
};
})(cl));
....
有关详细信息,请参阅this related question。