Javascript 添加到动态按钮的动态onClick

我正在使用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");
            });
}

---

问题是处理函数中使用的变量cl绑定到函数外部声明的同一个变量。当您在循环中迭代时，cl的值会发生变化，但您正在添加的函数不会发生变化

循环内变量闭包的错误是一个常见的Javascript编程问题，在循环内声明函数时需要随时注意。Javascript中没有像Java中那样的块作用域，只有函数作用域

基本上，模式是：

for (var i=0; i<len; i++) {
    foo.on('click', function() {
        console.log(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));
 ....

---

如需进一步参考，请参阅。

我遇到了相同的问题，因为它们都是使用您创建的上一个方法设置的，对吗？尝试使用递归函数来创建按钮，而不是for循环。请不要像上面的注释所建议的那样尝试使用递归来解决这个问题。您可能会想出一种方法来解决这个问题，但对于解决一个简单的函数闭包问题来说，这是完全不必要的。非常优雅，工作完美，并且有很好的解释。非常感谢你。

for (var i=0; i<len; i++) {
    foo.on('click', (function(bound_i) { 
        return function() {
            console.log(bound_i);
        };
    })(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));
 ....