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

【问题标题】：jQuery keyup event not working after partial view reload?部分视图重新加载后，jQuery keyup 事件不起作用？
【发布时间】：2015-12-31 16:49:42
【问题描述】：

在我的索引视图中，我有以下相关的 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();
            }
        });
}

HomeController：

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 应该仍然可以访问？

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-5 asp.net-mvc-partialview

【解决方案1】：

但部分视图已重新加载，我无法再通过单击 ENTER 键执行新搜索

您应该使用事件委托.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();
    }
});

希望这会有所帮助。

【讨论】：

这实际上完成了@AnalyticLunatic 想要的工作。发生这种情况是因为$("#Search").keyup(function(event) 在文档准备就绪时运行，此时它所做的更改将不再是同一个对象和jQuery将不知道在哪里看，因为代码不再被执行......我这样说只是为了解释为什么会发生这种情况以及为什么显示的代码有效

【解决方案2】：

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

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

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

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

【讨论】：