MVC Webgrid，javascript在排序和分页后停止工作答案

【问题标题】：MVC Webgrid, javascript stops working after sort and pagingMVC Webgrid，javascript在排序和分页后停止工作
【发布时间】：2012-03-30 01:36:17
【问题描述】：

我的 webgrid 有问题，在我的一个专栏中，我有一个带有单击功能的 JavaScript 的操作链接，一切正常。但是在我对任何列进行排序或对网格进行分页后，我的 JavaScript 停止工作。我已删除 ajaxupdatecontainerID 属性，并且我的 JavaScript 在分页后工作，但我无法再对列进行排序，分页后浏览器滚动到页面顶部。检查下面的代码：

<div id="grider">
    @{ var grid3 = new WebGrid(Model.webgridlastlopp.ToList(), rowsPerPage: 10, defaultSort: "Status", canPage: true, ajaxUpdateContainerId: "grider");}
    @grid3.GetHtml(tableStyle: "webgrid",
                        headerStyle: "webgrid-header",
                        footerStyle: "webgrid-footer",
                        alternatingRowStyle: "webgrid-alternating-row",
                        selectedRowStyle: "webgrid-selected-row",
                        rowStyle: "webgrid-row-style",
                        grid3.Column("Startstation", "Start station/kombiterminal"),
                                              grid3.Column("Slutstation", "Slut station/kombiterminal"),
                                              grid3.Column("Upphämtningsdatum", "Startdatum", format: @<text>@item.Upphämtningsdatum.ToString("yyyy/MM/dd")</text>),
                                              grid3.Column("Leveransdatum", "Leveransdatum", format: @<text>@item.Leveransdatum.ToString("yyyy/MM/dd")</text>),
                                              grid3.Column(format: (item) => Html.ActionLink("Visa detaljer", "OrderDetails", "Home", new { id = item.Ordernummer }, new { @class = "modal", @Style = "color:Gray;" }))
                                              ))
  </div>
  <script type="text/javascript">
        $(function () {
            $('.modal').click(function () {
                alert("hello");
        });
  </script>

【问题讨论】：

@DanielA.White，看起来像 ASP.NET MVC 附带的标准：System.Web.Helpers.WebGrid。

标签： javascript asp.net-mvc sorting paging webgrid

【解决方案1】：

在页面中，新的 HTML 正在加载到页面中。因此，您需要使用 jQuery live 方法：

<script type="text/javascript">
        $(function () {
            $('.modal').live('click', function () {
                alert("hello");
        });
  </script>

jQuery live

【讨论】：

请注意，.live() 已弃用，取而代之的是 .on()。见api.jquery.com/on
@BrianRogers - 我不知道......一直在使用 1.5 和 1.6，还没有升级到 1.7。谢谢

【解决方案2】：

在您的代码中添加对属性的 js 函数的引用

     @{ 
var grid3 = new WebGrid(
   Model.webgridlastlopp.ToList(), 
rowsPerPage: 10, 
    defaultSort: "Status", 
canPage: true, 
    ajaxUpdateContainerId: "grider",
ajaxUpdateCallback: "GridUpdate");
}

js函数

function GridUpdate(data) {
        applyGridChanges();
    }

【讨论】：