jQuery keyup事件後部分視圖重新加載不工作？

在我的索引視圖，我必須執行，當用戶無論點擊Enter鍵或點擊搜索圖標下面的相關jQuery代碼觸發搜索：jQuery keyup事件後部分視圖重新加載不工作？

<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鍵執行新的搜索。我仍然可以通過點擊搜索圖標觸發新搜索，但爲什麼我不能再使用輸入密鑰？

如果我只是重新加載部分視圖，我會認爲我的jQuery內的Document.Ready（）應該仍然可以訪問？

來源

2015-12-31 Analytic Lunatic

，但部分觀點已重載我可以通過點擊回車鍵

你應該使用事件代表團.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(); 
    } 
});

希望這會有所幫助。

來源

2015-12-31 16:52:16

這實際上是@AnalyticLunatic希望的工作..發生這種情況是因爲'$（「＃Search」）.keyup（function（event）'在文檔準備就緒時運行，並且此時它所做的更改不再是同一個對象，'jQuery'不知道去哪裏看，因爲代碼沒有被再次執行......我說這只是爲了解釋爲什麼會發生這種情況，以及爲什麼顯示的代碼有效 – nosthertus

當您運行$("#Search").keyup(...);時，您將附加到頁面上當前具有id的Search的任何元素。當您加載一個新的部分時，正在監聽keyup事件的舊元素將被銷燬，並創建一個新副本。這種新的元素沒有偵聽keyup

您的選擇是明確的：運行相同的keyup在部分加載後右聽音代碼，或做更好的事情，使用事件委派：

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

現在body標籤正在偵聽發生在與'#Search'選擇器匹配的所有子項中的任何keyup事件。

來源

2015-12-31 17:01:23 taveras

jQuery keyup事件後部分視圖重新加載不工作？

回答

相關問題