如何获取动态生成元素的属性 ASP.NET

Question

我知道有很多关于这个主题的问题，我试过很多都无济于事。如果有人有任何建议，将不胜感激。我正在尝试获取输入的 id 属性。我已经剥离了代码以专注于这个问题。

cshtml:

@for (var i = 0; i < Model.DieRouteChecks.Count; i++) 
{
    <div class="col-9">
       <div class="form-group newThresholdInput">
          <input asp-for="@Model.DieRouteChecks[i].NewDieThresh" class="form-control" id="@Model.DieRouteChecks[i].Description">
       </div>
    </div>
}

我的javascript:

$(".newThresholdInput input").click(() => {

        console.log($(this).attr("id")); //To see what's being returned

        switch ($(this).attr('id')) {
            case "Order Value":
                  //Do stuff
                  break;
            case "Order Quantity":
                  //Do stuff
                  break;
            }
        })

单击输入时，我一直收到 undefined 记录。我试过了

$(".newThresholdInput").click(() => {
    console.log($(this).find("input").attr("id"));
}

而且它只打印出第一个输入元素的 id。我也试过使用 onclick="function(this)" 并创建一个在脚本标签中调用的事件处理程序，但仍然没有。

有趣的是 console.log($(".newThresholdInput input").attr("id")) 记录了 Order Value，所以我猜这与我使用 $(this).

的方式有关

我确定我只是遗漏了一些小东西，但我不知道它可能是什么。

Answer 1

在你的点击事件中，this代表了整个Window，所以它找不到你点击的元素。

将您的 js 更改为：

@for (var i = 0; i < Model.DieRouteChecks.Count; i++) 
{
    <div class="col-9">
       <div class="form-group newThresholdInput">
          <input asp-for="@Model.DieRouteChecks[i].NewDieThresh" class="form-control" id="@Model.DieRouteChecks[i].Description">
       </div>
    </div>
}
@section Scripts {
    <script>    
        $(document).on('click', '.newThresholdInput input', function () {
              var index = $(this).attr("id");
              console.log(index);
        });
    </script>
}

如何获取动态生成元素的属性 ASP.NET

How to get attribute of dynamically generated element ASP.NET

javascript

jquery

razor

asp.net-core-mvc