Question

我正在使用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

Answer 1

问题是在处理函数中使用的变量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。

动态onClick添加到动态按钮

1 个答案: