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

Question

我是 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 中排序或分页后它停止工作了

Answer 1

你应该使用委托：

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

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

Answer 2

在对 table 内容进行排序时刷新。试试这个

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

Answer 3

试试这个

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

Answer 4

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

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

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

javascript not working in MVC webgrid after sorting or paging

jquery

asp.net-mvc

webgrid