jQuery keyup event not working after partial view reload?

Question

On my Index View, I have the below relevant jQuery code that executes when a user either hits Enter or clicks the Search Icon to trigger a Search:

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

        }

Everything appears to work fine on the first search, but partial view has reloaded I can no longer perform a new Search by clicking the ENTER key. I can still trigger a new search via the Search Icon being clicked, but why can I no longer use the Enter Key?

If I am just reloading the Partial View, I would think my jQuery inside the Document.Ready() should still be accessible?

Zakaria Acharki · Accepted Answer · 2015-12-31 16:52:16Z

10

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

You should use event delegation .on() since the element with id Search will be added dynamically after the reload, simple keyup event can't deal with fresh DOM :

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

Hope this helps.

answered Dec 31, 2015 at 16:52

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oscar Reyes Over a year ago

This actually does the job @AnalyticLunatic wants.. this happens because $("#Search").keyup(function(event) is ran when document is ready and at that point, the change it makes wont no longer be the same object and jQuery will not know where to look because the code is not being executed again... I say this just to explain why this happens and why the shown code works

taveras · Accepted Answer · 2015-12-31 17:01:23Z

0

When you are running $("#Search").keyup(...); you are attaching to any element currently on the page that has the id of Search. When you load a new partial, the old element that is listening for the keyup event is destroyed, and a new copy is made. This new element is not listening for keyup

Your choices are clear: run the same keyup listening code right after loading in the partial, or do the Better thing and use event delegation:

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

Now, the body tag is listening for any keyup events that happen inside of all children that match the '#Search' selector.

answered Dec 31, 2015 at 17:01

taveras

4953 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery keyup event not working after partial view reload?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related