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編寫的代碼的點擊行functinon但它停止工作後，我整理或的WebGrid做分頁

Answer 1

對錶格內容進行排序得到刷新。試試這個

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

Answer 2

你應該使用委託：

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

您的初始代碼將事件處理函數直接綁定到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"); 
    }