How to bind javascript function or call during webgrid binding? -

i have web grid looks following more 1000 records.

@{ var grid = new webgrid(canpage: true, rowsperpage: @model.pagesize, cansort: true, ajaxupdatecontainerid: "supplistgrid"); grid.bind(@model.searchresultsupplierviewmodels, rowcount: @model.totalpagerows, autosortandpage: false); grid.pager(webgridpagermodes.all);  @grid.gethtml(tablestyle: "webgrid", footerstyle:"pp-pagenumber",             htmlattributes: new {id="supplistgrid"},             columns: grid.columns(             grid.column(format: (item) => @html.raw("<div class='row panellawfirmresultbox'><span class='blue'>panel partnership rating ("+item.panelrating+"): </span><span class='panelstars'>"+"2.5"+"</span></div>"))      ))  }  

and above webgrid have rating span used show panel rating in form of stars. in order display panel rating stars have used following way.

<script> $(document).ready(function () {     $('span.panelstars').panelstars();     }); $.fn.panelstars = function () {     return $(this).each(function () {         $(this).html($('<span />').width(math.max(0, (math.min(5, parsefloat($(this).html())))) * 16));     }); } </script> 

at present during first page load works fine, showing correct starring first 10 records. when click on next page, starring function not functioning.

when checked javascript not working in mvc webgrid after sorting or paging link, author mentioned on sorting table content refresh, events has delegated.

so in document ready added following script like

$(document).on({         mouseenter: function () {             $('span.panelstars').panelstars();             $('span.clientstars').clientstars();              $.fn.panelstars = function () {                 return $(this).each(function () {                     $(this).html($('<span />').width(math.max(0, (math.min(5, parsefloat($(this).html())))) * 16));                });             } }, '#supplistgrid tr'); 

now starring came full starring, come while mouse comes on tr tag.

but need happen same on page click. how do it?

ho resolved problem adding small line of code webgrid control.

i added following line of code in webgrid control

ajaxupdatecallback: "getstars" 

and created getstars() function declared this

function getstars() {     $('span.panelstars').panelstars();     $('span.clientstars').clientstars();              $.fn.panelstars = function () {                 return $(this).each(function () {                     $(this).html($('<span />').width(math.max(0, (math.min(5, parsefloat($(this).html())))) * 16));                 });             }              $.fn.clientstars = function () {                 return $(this).each(function () {                     $(this).html($('<span />').width(math.max(0, (math.min(5, parsefloat($(this).html())))) * 16));                 });             } }