javascript 在排序或分页后无法在 MVC webgrid 中工作答案

【问题标题】：javascript not working in MVC webgrid after sorting or pagingjavascript 在排序或分页后无法在 MVC webgrid 中工作
【发布时间】：2015-06-05 20:39:16
【问题描述】：

我是 MVC 的新手，并试图在 webgrid 上完善概念。我在view中有以下代码

@model IEnumerable<MVCMovies.Models.Movie>
@{
  ViewBag.Title = "Index";      

 }
 <script type="text/javascript">
 $(function() {
    $('tbody tr').on('hover', (function () {
        $(this).toggleClass('clickable');
    }));
    $('tbody tr').on('click', (function () {
        alert('rajeev');
    }));
});
</script>
 <style type="text/css">
   .table {
   margin: 4px;
    width: 100%;
    background-color: #FCFCFC;
}

.head {
    background-color: #11E8CD;
    font-weight: bold;
    color: #CC6699;       
}

.webGrid th, .webGrid td {
    border: 1px solid #C0C0C0;
    padding: 5px;
    color:white;
}

.altRow {
    background-color: #E4E9F5;
    color: #000;
}

.gridHead a:hover {
    text-decoration: underline;
}

.description {
    width: auto;
}

.selectRow {
    background-color: #0B7BEB;
}
.clickable {
    cursor: pointer;
    background: #ffff99;
}
</style>
<p>
   @Html.ActionLink("Create New", "Create")
</p>
<div>
  @using (Html.BeginForm())
  {
    @Html.AntiForgeryToken()
    <div style="float:left">Title : @Html.TextBox("SearchString")<br />         </div>
        <div style="float:left; padding-left:5px">
        <input type="button" value="Filter" class="btn" />
    </div>
    }
 </div>
  <div id="grid">
     @{
     var gd = new WebGrid(Model, rowsPerPage: 2, ajaxUpdateContainerId: "grid");
        @gd.GetHtml(tableStyle: "table");
   }

 </div>


     @section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

现在我已经为单击行功能编写了 jquery 代码，但是在我在 webgrid 中排序或进行分页后它停止工作

【问题讨论】：

运行代码出现什么错误？
没有错误，但 javascript 代码停止工作.. 即按行单击排序后没有警报消息
您是否在动态更新表格行？ - 如果是这样，使用事件委托 - $(document).on('click', 'tr', (function () { ...

标签： jquery asp.net-mvc webgrid

【解决方案1】：

你应该使用委托：

$(function() {
    $('tbody').on('hover', 'tr', function () {
        $(this).toggleClass('clickable');
    });
    $('tbody').on('click', 'tr', function () {
       alert('rajeev');
   });
});

您的初始代码将事件处理程序直接绑定到tr 元素。在排序和分页时，行 a 重新呈现，因此处理程序丢失。

【讨论】：

【解决方案2】：

对表格内容进行排序时会刷新。试试这个

    $(function () {
        $(document).on('click', 'tbody tr', (function () {
            alert('rajeev');
        }));
        $(document).on({
            mouseenter: function () {
                $(this).toggleClass('clickable');
            },
            mouseleave: function () {
            }
        }, 'tbody tr');
    });

【讨论】：

正确！ on 排序表的 tr 每次都会生成，因此必须按照您的方式委派事件。
它仅适用于click。 hover 部分即使在第一次加载时仍然无法正常工作
您可以使用 mouseenter 和 mouseleave。立即查看

【解决方案3】：

试试这个

<script type="text/javascript">
     $(function() {
        $('tbody tr').live('hover', (function () {
            $(this).toggleClass('clickable');
        }));
        $('tbody tr').live('click', (function () {
            alert('rajeev');
        }));
    });
  </script>

【讨论】：

【解决方案4】：

ajaxUpdateCallback 是在服务器调用完成后将被调用的 javascript 函数的名称。这将允许您在分页或排序后调用 jQuery 函数。

 @ { var grid = new WebGrid(data, ajaxUpdateContainerId : "grid", 
            ajaxUpdateCallback: "callBack");
   }

【讨论】：

这是处理和绑定事件的最佳程序。很好的努力和回答