时间戳

首页 > 解决方案 > NET Core jquery 在文本框输入上触发两次

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

问题描述

在我的 ASP Core 2.2 中。MVC 项目我有一个带有下拉列表和搜索文本框的标题/过滤器 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>

监听选择列表或文本框中输入变化的 jQuery 代码如下所示：

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

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

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

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

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

标签： jqueryasp.net-corepartial-views

解决方案

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

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

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

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

推荐阅读