title: How to bind javascript function or call during webgrid binding?
body: <p>I have a web grid which looks like following with more than 1000 records. </p>
  
  <pre><code>@{
  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) =&gt; @Html.Raw("&lt;div class='row panelLawfirmresultbox'&gt;&lt;span class='blue'&gt;Panel Partnership Rating ("+item.PanelRating+"): &lt;/span&gt;&lt;span class='panelStars'&gt;"+"2.5"+"&lt;/span&gt;&lt;/div&gt;"))
       )) 
  } 
  </code></pre>
  
  <p>And my above webgrid have a rating span which used to show the panel rating in the form of stars. In order to display panel rating stars i have used the following way.</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
      $('span.panelStars').panelStars();
      });
  $.fn.panelStars = function () {
      return $(this).each(function () {
          $(this).html($('&lt;span /&gt;').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
      });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>At present during the first page load everything works fine, showing the correct starring for my first 10 records. But when i click on next page, starring function not functioning. </p>
  
  <p>When i checked <a href="https://stackoverflow.com/questions/29386735/javascript-not-working-in-mvc-webgrid-after-sorting-or-paging">javascript not working in MVC webgrid after sorting or paging</a> link, the author mentioned that On sorting the table content get refresh, so events has to be delegated.</p>
  
  <p>So in my document ready i added the following script like</p>
  
  <pre><code>$(document).on({
          mouseenter: function () {
              $('span.panelStars').panelStars();
              $('span.clientStars').clientStars();
  
              $.fn.panelStars = function () {
                  return $(this).each(function () {
                      $(this).html($('&lt;span /&gt;').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
                 });
              }
  }, '#suppListGrid tr');
  </code></pre>
  
  <p>Now the starring came back but with full starring, but it will only come while mouse comes over tr tag. </p>
  
  <p>But what i need is to happen the same on my page click. How do i do it?</p>