Javascript click 事件不是第一次触发

Question

我有一个 ASP.NET 应用程序，我从后端获取数据，并使用 JavaScript 中的一个函数来设置我的点击事件。我想要的输出(目前)是看到一个警告框，其中包含说明我单击了哪个行索引的文本。

这是我的javascript代码:

<script>
    function OnSelect() {
    var table = document.getElementById("table-list");
    var rows = table.getElementsByTagName("tr");

    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler =
            function(row)
            {
              return function () {
                var cell = row.getElementsByTagName("td")[0];
                var id = cell.innerHTML;
                $.ajax({
                  type: "post",
                  url: "/Foo/FooSelected",
                  data: { name: id },
                  success: function (data) {
                    alert(data); //works the second time I click
                  }
                });
              };
            };
        currentRow.onclick = createClickHandler(currentRow);
    }
  }
</script>

只是为了展示这是我在 html 上添加函数的方式:

<table id="table-list" class="table table-striped table-sm" runat="server">
              <thead>
                <tr>
                  <th>My Foo Table</th>
                </tr>
              </thead>
              <tbody>
                @for (int i = 0; i < Model.FooCollection.Count; i++)
                {
                  <tr onclick="OnSelect()" style="cursor:pointer;">
                    <td>@Model.FooCollection[i].FooName</td>
                  </tr>
                }
              </tbody>
            </table>

我的问题是，在我第二次点击任意行后出现警告框。我需要做什么才能让我的警告框在单击后显示？非常感谢。

Answer 1

因为您似乎使用的是纯 javascript，所以我会这样做，(将其放在您的脚本标记中):

document.addEventListener("DOMContentLoaded", function(){
    // Handler when the DOM is fully loaded
     var table = document.getElementById("table-list");
     var rows = table.getElementsByTagName("tr");
     for (i = 0; i < rows.length; i++) {
          var currentRow = table.rows[i];


          currentRow.onclick = function(row)
          {
            return function () {
               var cell = row.getElementsByTagName("td")[0];
               var id = cell.innerHTML;
               $.ajax({
               type: "post",
               url: "/Foo/FooSelected",
               data: { name: id },
               success: function (data) {
                   alert(data); //works the second time I click
              }
            });
          };
        };
   }
});