Javascript ASP.Net：执行多个Ajax请求的不可见单击计数器

我有个问题。我的数据库中有一个dataTable，其结构如下（我遗漏了不需要的信息，如

标记等-dataTable在50到300个条目之间动态变化）：

最后，我有一个模式，当点击第一列时，会弹出详细视图

<!-- Modal -->
<div class="modal fade" id="infoModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title" id="ModalHead"></h3>
            </div>
            <div class="modal-body">
                <h5 class="text-center" id="ModalBody"></h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

×
接近

现在这段代码运行得很好，直到我第五次关闭模式并单击另一行的第一列而不刷新页面

当我查看Chrome的网络调试工具时，我注意到，在我第一次单击时，我的ajax请求获得了正确的ID，并将其传递给CodeBehind中的WebMethod。工作顺利。 但当我关闭模式并单击表中另一行的另一个第一列时，ajax请求将使用正确的ID执行两次（但问题是并行的）。在第三次单击时，将执行3个ajax请求，在第四次单击时执行4个请求，依此类推。（见截图）

因此，在代码隐藏中，为WebMethod提供的ID是正确的，但它经常被提供给。例如，我在第8次点击时提出了8个类似的请求。在我看来，接下来是困难

为什么会发生这种情况？我如何“禁用此不可见”计数器？ 在单击模式按钮“关闭”之前，我无法启动另一个Ajax请求

---

请帮帮我。

尽量不要拘泥于点击TR，只要在点击TD时调用AJAX服务即可，比如：

HTML:

---

我试过这个，但又是同样的问题。没有什么变化。

function GetModalDetails() {
        $('tbody tr').click(
            function () {
                var id = $(this).data('id');
                var JSONData = '{\'id\':' + JSON.stringify(id) + '}';
                makeAjaxCall(JSONData, id);
            });

        function makeAjaxCall(JSONData, id) {
            $.ajax({
                url: "/Test.aspx/getDetails",
                data: JSONData,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    var result = msg;
                    document.getElementById("ModalBody").innerHTML = result.d;
                    document.getElementById("ModalHead").innerHTML = "Orderdetails " + JSON.stringify(id);
                }
            })
        }
        return false;
    }

<!-- Modal -->
<div class="modal fade" id="infoModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title" id="ModalHead"></h3>
            </div>
            <div class="modal-body">
                <h5 class="text-center" id="ModalBody"></h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

    <table>
     <tr>
      <td data-id="34XJ-4" data-toggle="modal" class="modal-dialog modal-lg sorting_1" data-target="#infoModal" onclick="GetModalDetails()" style="color:darkblue; text-decoration:underline; cursor:pointer;">34XJ-4</td>
      <td>Text34</td>
      <td>11568</td>
      <td>true</td>
    </tr>

    function GetModalDetails() 
    {
     var id = $(this).data('id');
     var JSONData = '{\'id\':' + JSON.stringify(id) + '}';
     makeAjaxCall(JSONData, id);
    }
    function makeAjaxCall(JSONData, id) {
        $.ajax({
            url: "/Test.aspx/getDetails",
            data: JSONData,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var result = msg;
                document.getElementById("ModalBody").innerHTML = result.d;
                document.getElementById("ModalHead").innerHTML = "Orderdetails " + JSON.stringify(id);
            }
        })
    }
    return false;
}