NET Core jquery 在文本框输入时触发两次

Question

在我的 ASP Core 2.2 中。 MVC 项目我有一个 header/filter div，带有下拉列表和搜索文本框。

<div class="row">
  <div class="col-9 form-inline">
    <select id="ddlSelect" asp-items="Model.Ddl" class="form-control filter"></select>
    <input type="text" name="SearchString" placeholder="Search" id="tbSearch" class="form-control filter ml-2" />
  </div>
  <div class="col-3 text-right"></div>
</div>

使用 jquery 然后我对作为部分视图的列表进行部分重新加载：

<div class="section-list">
  @{await Html.RenderPartialAsync("_PartialList1", Model);}
</div>

监听select列表或文本框输入变化的jQuery代码如下：

$(document).ready(function() {
  $('.content').on("change", ".filter", function() {
    showList(this);
    return false;
  });

  $('.content').on("input", ".filter", function () {
    showList(this);
    return false;
  });
});

showList(this) 然后使用 $('.section-list').load(url);

发出 AJAX 请求

代码有效，但问题是，当我在 #tbSearch 文本框中输入内容时，jQuery input 侦听器会正确捕获这些内容，并且我的局部视图会重新加载。然而，在初始部分重新加载后， change 事件被触发并且部分视图再次重新加载。

结果是正确的，但我不希望 jQuery 触发两次。有解决办法吗？

Answer 1

问题是因为 input 事件首先在文本框上触发，然后随着内容的更改它失去焦点并且 change 事件立即被触发。

要解决此问题，您只需在文本框上使用 input 事件，如下所示：

$(document).ready(function() {
  $('.content').on("change", "select.filter", function() {
    showList(this);
  }).on("input", "input.filter", function() {
    showList(this);
  });
});

请注意，在这两种情况下都不需要 return false。

NET Core jquery 在文本框输入时触发两次

NET Core jquery fires two times on textbox input

jquery

asp.net-core

partial-views