Question

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

这是我的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
              }
            });
          };
        };
   }
});

Javascript点击事件第一次没有触发

1 个答案: