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

时间:2015-12-31 16:49:42

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

在我的索引视图中,我有以下相关的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仍然可以访问吗?

2 个答案:

答案 0 :(得分:8)

  

但部分视图已重新加载我无法再通过单击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();
    }
});

希望这有帮助。

答案 1 :(得分:0)

当您运行$("#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; } 个事件。