javascript not working in MVC webgrid after sorting or paging

问题

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")
}

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

回答1:

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');
    });

回答2:

The ajaxUpdateCallback is the name of the javascript function that will get called after the server call is complete. This would allow you to call your jQuery function after paging or sorting.

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

回答3:

You should use delegates:

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

Your initial code binds the event handler directly to the tr elements. On sorting and paging, the row a re-rendered and so the handlers are lost.

回答4:

try this

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

来源：https://stackoverflow.com/questions/29386735/javascript-not-working-in-mvc-webgrid-after-sorting-or-paging

标签

jquery

asp.net-mvc

webgrid