Ok, so I have partial with table and buttons to 'move/delete' each row. Each action is made using ajax handler, but after I'll delete one row then after partial update I can't reuse this button - it just doesn't work. Any ideas how to solve it? Tried calling $this->pageCycle(); but with no luck :/

Ok thanks to luketowers I've found a solution to this issue.

• Why it happened: I was using ajax calls after $(document).ready() call inside script tags:

$(document).ready(function(){

   $('.add').on('click', function(){ 

      var clickedId = $(this).data("id"); 

      $.request('onMyAction', { 

          data: { value: clickedId} 

          }); 

    }); 

}); jQuery attaches event handlers to elements when it loads in the $(document).ready() call. The kicker is, it only attaches event handlers to elements that already exist. So when your partial is dynamically updated, elements are removed and added by the JS. Because these are now completely different elements, they will not have the necessary events attached to them.

• Solution I had to prepare each button in row to use data-* calls so html looks like this:

  <a class="btn btn-mini btn-success add" href="#" data-request="onMyAction" data-request-data="value: '{{ a.id }}' " Do it

Last updated 7 years ago