jQuery 部分视图重新加载后 keyup 事件不起作用？

Question

在我的索引视图中，我有以下相关的 jQuery 代码，当用户按下 Enter 键或单击搜索图标以触发搜索时执行该代码：

<div class="homeContent">
    @Html.Partial("~/Views/Shared/_homeIndexContent.cshtml")
</div>

@section Scripts {

<script type="text/javascript">
$(document).ready(function () {
    // Set focus on load to the Search box.
    document.getElementById("Search").focus();

    $("#Search").keyup(function(event){
        if(event.keyCode==13){
            alert("Index.cshtml - Enter Pressed - Method inside Document.Reader().");
            searchAssets();
        }
    });

// Called when user clicks the magnifying glass icon next to the Searchbox.
    function searchAssets() {
        alert("Index.cshtml - searchAssets() called.");
        var searchValue = document.getElementById("Search").value;
        $.ajax({
            url: '@Url.Action("search", "Home")',
            data: { searchCriteria: document.getElementById("Search").value },
            success: function (resp) {
                $(".homeContent").html(resp);
                document.getElementById("Search").value = searchValue;
                document.getElementById("Search").focus();
                var rows = $('.grid-table tbody tr').length;
                $('#rowCount').html(rows);
                setVerifyBtnClass();
            }
        });
}

家庭控制器:

public ActionResult Search(string searchCriteria)
        { 
            fillPagingIntervalList();
            var SearchResults = db.TABLE.ToList().Where(m.Status.STATUS_DESCRIPTION != null && m.Status.STATUS_DESCRIPTION.ToString().ToUpper() == searchCriteria.ToUpper() || // Other search Code
            // Return the "refreshed" partial view without reloading entire page.
            return PartialView("~/Views/Shared/_homeIndexContent.cshtml", SearchResults);

        }

第一次搜索似乎一切正常，但部分视图已重新加载我无法再通过单击 ENTER 键执行新的搜索。我仍然可以通过单击“搜索”图标来触发新搜索，但为什么我不能再使用 Enter 键？

如果我只是重新加载局部视图，我认为 Document.Ready() 中的 jQuery 应该仍然可以访问？

Answer 1

but partial view has reloaded I can no longer perform a new Search by clicking the ENTER key

您应该使用事件委托 .on() 因为具有 id Search 的元素将在重新加载后动态添加，简单的 keyup 事件无法处理新鲜的 DOM :

$("body").on("keyup", "#Search", function(event){
    if(event.keyCode==13){
        alert("Index.cshtml - Enter Pressed - Method inside Document.Reader().");
        searchAssets();
    }
});

希望对您有所帮助。

Answer 2

当您运行宁 $("#Search").keyup(...); 时，您将附加到页面上当前具有 id 或 Search 的任何元素。当您加载一个新的部分时，正在侦听 keyup 事件的旧元素将被销毁，并制作一个新副本。这个新元素没有监听 keyup

您的选择很明确：运行在局部加载后立即使用相同的 keyup 监听代码，或者做更好的事情并使用事件委托：

$('body').on('keyup', '#Search', function() { ... });

现在，body 标签正在侦听发生在与 '#Search' 选择器匹配的所有子项内部的任何 keyup 事件。

jQuery 部分视图重新加载后 keyup 事件不起作用？

jQuery keyup event not working after partial view reload?

asp.net-mvc

jquery

asp.net-mvc-partialview

asp.net-mvc-5