Click event lost after telerik grid sorting

Question

I have a telerik extension grid with sorting enabled. Each row has a link 'Approve' that shows a modal popup when it is clicked. I have created this link using Template,

   columns.Bound(o => o.UserSeq).Template(
       @<text>
          @Html.ActionLink("Approve", "ApproveUser", "Home", new { userSeq = @item.UserSeq }, new { @class = "modal-link" })       
       </text>
.ClientTemplate(
     <a href=" + Url.Action("ApproveUser", "Home", new { userSeq = "<#= UserSeq #>" }, null) + " class='modal-link'> Approve </a>"                               
 ).Title("Action").Width(100);

My problem is that the modal pop appears as a separate page when the link 'Approve' is clicked after grid sorting. This works fine before sorting the grid.

After research, I found that maybe I need to rebind the click event to show the modal , after sorting. But, I am not sure how to do that.

I am trying to rebind the click event to "Approve" link, after each column header of the grid is clicked for sorting. So far, I can track when the sort column is clicked. But, my issue is I cannot trigger any event on clicking that link 'Approve' after sorting.

 $('.modal-link').bind('click', function () {
                 alert('outBound');
             });

             $(".t-header .t-link").on('click', function () {
                 alert('test');
                 $('.modal-link').bind('click', function () {
                     alert('Bound');
                 });

Please help!

Answer 1

I found a workaround to my issue. On click of the link, I need to add html attributes to that link. So, instead of trying to do that on rebind of click event, I just added those html attributes to the link in the Client Template while defining telerik grid in the view.

  .ClientTemplate(
     <a href=" + Url.Action("ApproveUser", "Home", new { userSeq = "<#= UserSeq #>" }, null) + " **data-target='#modal-container' data-toggle='modal'** class='modal-link'> Approve </a>" 
 ).Title("Action").Width(100);