自递归调用(可能，由于涉及闭包)

Self-recursive calls (probably, due to closure involving)

本文关键字：于涉闭包递归调用可能更新时间：2023-09-26

我基本上有这样的代码:

$(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!');
      }
    });
})();

这段代码有两个问题:

当我单击表中的链接(这是data.myCollection[i].object1.name的文字)时，无论我单击哪个链接，它总是在警报中显示相同的数据yes: data.myCollection[i].object1.name。虽然它们的html代码不同
我点击的链接越多，每次点击的警报越多:第一次只有一个警报出现，下一次- 2个，下一次- 4个或更多。

有多重问题

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

试

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);
    })
});

_{免责声明:未测试}