JavaScript的MVC中不工作排序或分页后的WebGrid

问题描述

我在MVC新手，并试图擦亮概念上的的WebGrid 。我在查看以下code

I am newbie in MVC and trying to polish concepts on webgrid. I have the following code in 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 code的点击一行functinon但它停止工作后，我整理或的WebGrid

Now i have jquery written code for click on row functinon but it is stops working after i sort or do paging in webgrid

推荐答案

在排序表的内容得到刷新。试试这个

On sorting the table content get refresh. try this

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

这篇关于JavaScript的MVC中不工作排序或分页后的WebGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！