Javascript 自递归调用（可能是由于涉及闭包）

我基本上有以下代码：

$(document).ready(function() {
  (function fillOutTable() {
    $.ajax({
      type: 'GET',
      url: 'someUrl',
      success: function(data) {
        var myTable = $("#tbl1");
        for(var i in data.myCollection) {
          /*filling out the table*/
          var str = $(
            ["<tr>",
            "<td>", counter++, "</td>",
            "<td>",
                "<a href='#' class='myClass'>", data.myCollection[i].object1.name, "</a>",
            "</td>",
            "<td>", title1,  "</td>",
            "<td>", title2,  "</td>",
            "<td>", title3,  "</td>"
            "</tr>"].join("")
          );

          myTable.find("tbody").append(str);
          myTable.find("tbody").on("click", ".myClass", function() {
            $('#twitterBtstrModal').on('shown.bs.modal', function() {
              alert('yes: ' + data.myCollection[i].object1.name);
            }).modal();
          });
        }
      },

      error: function(jqXHR, textStatus, errorThrown) {
        showNoDataMessage();
        alert('Something went wrong!');
      }
    });
})();

$（文档）.ready（函数（）{
（函数fillOutTable（）{
$.ajax({
键入：“GET”，
url:'someUrl'，
成功：功能（数据）{
var myTable=$（“#tbl1”）；
for（data.myCollection中的var i）{
/*填表*/
var str=$(
["",
“”，计数器++，“”，
"",
"",
"",
“，标题1，”，
“，标题2，”，
“，标题3”
“”].join（“”）
);
myTable.find（“tbody”）.append（str）；
myTable.find（“tbody”）。在（“click”，“.myClass”，function（）上{
$（'twitterBtstrModal'）.on（'show.bs.modal'，function（）{
警报（'yes:'+data.myCollection[i].object1.name）；
}).modal（）；
});
}
},
错误：函数（jqXHR、textStatus、errorshown）{
showNodeDataMessage（）；
警惕（“出了什么事！”）；
}
});
})();

此代码有两个问题：

当我单击表中的链接（即

data.myCollection[I].object1.name

）时，无论我单击哪个链接，它都会在警报中显示相同的数据

yes:data.myCollection[I].object1.name

。尽管所有链接的html代码不同

我点击链接的次数越多，每次点击得到的警报就越多：我第一次点击时，只有一个警报出现，下一次是2个，下一次是4个或更多

---

有很多问题

• 在循环中使用闭包变量
• 将事件处理程序绑定到另一个事件处理程序中…等等

试一试

jQuery（函数（$）{
var myTable=$（“#tbl1”），
$tbody=myTable.find（“tbody”），
$model=$（'twitterbtrmodal'）；
$.ajax({
键入：“GET”，
url:'someUrl'，
成功：功能（数据）{
$.each（data.myCollection，函数（i，数据）{
/*填表*/
var str=$(
["",
“”，计数器++，“”，
"",
"",
"",
“，标题1，”，
“，标题2，”，
“，标题3”
“”].加入（“”）；
//使用数据api存储行数据
$（str）.appendTo（$tbody）.data（'rowdata'，data）
});
},
错误：函数（jqXHR、textStatus、errorshown）{
showNodeDataMessage（）；
警惕（“出了什么事！”）；
}
});
//仅注册这些事件一次
//将获取当前行数据并将其设置为模式的委托处理程序
$tbody.on（“单击“，”.apiKeyName”），函数（）{
$model.data（'mydata'，$（this.closest（'tr'）.data（'rowdata'））.modal（）；
});
$model.on（'show.bs.modal'，函数（）{
//从模态的数据中读取数据
var data=$model.data（'mydata'）；
警报（“是：”+data.object1.name）；
})
});

---

免责声明：未测试

请参阅和

警报（'yes:'+data.object1.name）；

-您忘记了我的代码

警报（'yes:'+data.myCollection[I].object1.name）中的内容

；@Alex我改变了

数据的存储方式，

因此我不必再访问集合来访问行数据…查看行

var data=$model.data（'mydata'）；

，

$model.data（'mydata'，$（this）.closest（'tr'）.data（'rowdata'））

$（str.appendTo（$tbody.data（'rowdata'，data）谢谢，但这不是我所需要的。我不想改进代码+修复错误，我想修复错误。因为改进会让人很难跟上，看不到区别。@Alex那么我不是你的人…修复代码需要改进其中的错误…@Alex如果不重新设计，修复代码会更困难/不可能，因为从我的观点来看，设计本身存在问题……在您的案例中，它将涉及到取消绑定事件处理程序、创建本地闭包等，从而造成实际需要的更多混乱

jQuery(function ($) {
    var myTable = $("#tbl1"),
        $tbody = myTable.find("tbody"),
        $model = $('#twitterBtstrModal');

    $.ajax({
        type: 'GET',
        url: 'someUrl',
        success: function (data) {

            $.each(data.myCollection, function (i, data) {
                /*filling out the table*/
                var str = $(
                ["<tr>",
                    "<td>", counter++, "</td>",
                    "<td>",
                    "<a href='#' class='myClass'>", data.myCollection[i].object1.name, "</a>",
                    "</td>",
                    "<td>", title1, "</td>",
                    "<td>", title2, "</td>",
                    "<td>", title3, "</td>"
                "</tr>"].join(""));

                //store the row data using data api
                $(str).appendTo($tbody).data('rowdata', data)
            });
        },

        error: function (jqXHR, textStatus, errorThrown) {
            showNoDataMessage();
            alert('Something went wrong!');
        }
    });

    //register these events only once

    //a delegated handler which will get the current rows data and set it to the modal
    $tbody.on("click", ".apiKeyName", function () {
        $model.data('mydata', $(this).closest('tr').data('rowdata')).modal();
    });
    $model.on('shown.bs.modal', function () {
        //read the data from the modal's data 
        var data = $model.data('mydata');
        alert('yes: ' + data.object1.name);
    })
});