在MVC 4的部分視圖中使用PagedList在瀏覽'分頁'頁面時拋出jQuery/JS

Question

我剛剛在我的MVC 4應用程序中使用PagedList實現了分頁。我的應用程序的主頁包含一個局部視圖，顯示有關某些對象的彙總數據列表。在每個列表項旁邊都有一個按鈕，點擊後會啓動一個模式窗口，顯示有關該特定列表項的更多信息。

在列表項目的第一個「分頁」頁面上，所有工作都很好，但是如果我導航到第二個「分頁」頁面並單擊按鈕啓動模式，則不會發生任何事情。從Chrome的開發者工具中，我獲得Uncaught TypeError: Object [object Object] has no method 'modal'。

部分問題輸出列表，包含模態的DIV和JS函數來處理啓動模式窗口的按鈕單擊事件。這裏是JS從局部視圖：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.show-modal').click(function() { 
     var url = $('#modal-view-property-from-get-all').attr('data-url'); 
     var id = $(this).attr('data-id'); 

     $.get(url + '/' + id, function (data) { 
      $('#view-property-from-get-all-container').html(data); 
      $('#modal-view-property-from-get-all').modal('show'); 
     }); 
    }); 
}); 
</script> 

，當我瀏覽回第一個「分頁頁面，按鈕不火或者和同一遺漏的類型錯誤被拋出。另一個我使用截斷多行文本的jQuery插件也停止工作，文本溢出其包含的DIV。

1. 這裏實際發生了什麼 - 爲什麼使用分頁會干擾JS？
2. 我該如何解決這個問題？

編輯：

特定類型的所有記錄從控制器動作返回：由Ajax.ActionLinks()

return PartialView("_GetAllPropertiesPartial", model.ToPagedList(pageNumber, pageSize)); 

因爲它是一個局部的，尋呼導航的處理：

@Ajax.ActionLink("<<", "GetAllProperties", new { page = 1 }, new AjaxOptions { UpdateTargetId = "quick-property-search-results" }) 

Answer 1

您需要將事件處理程序綁定到某些事物上不會在你的標記會被替換，並使用.on()方法而不是.click()，就像這樣：

<script> 
$(function() { 
    $('body').on('click', '.show-modal', function (e) { 
     var url = $('#modal-view-property-from-get-all').attr('data-url'); 
     var id = $(this).attr('data-id'); 

     $.get(url + '/' + id, function (data) { 
      $('#view-property-from-get-all-container').html(data); 
      $('#modal-view-property-from-get-all').modal('show'); 
     }); 
    }); 
}); 
</script> 

可以使用比body其他的東西，如果你有，你知道會不會被替換父元素。另外值得一提的是，你可以使用​​：http://api.jquery.com/load/

$('#view-property-from-get-all-container').load(url + '/' + id, function (response, status, jqxhr) { 
    // this is an optional callback 
    $('#modal-view-property-from-get-all').modal('show'); 
});