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();
            }
        });
}

的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仍然可以访问吗？

Answer 1

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

您应该使用事件委派 .on() ，因为重新加载后动态添加标识为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

现在，keyup标记正在侦听与'#Search'选择器匹配的所有子项内发生的任何li:hover { background-color: #111!important; } li a.active:hover { background-color: #444!important; }个事件。

部分视图重新加载后jQuery keyup事件无法正常工作？

2 个答案: