Question

I am using RenderPartial to generate CListView and all the contents generated properly and good pagination is working fine too. But when I added my custom JS to elements generated by the CListview it works fine for the the fist page content but when i use pagination and click to page 2 then the JS binding fails.

Is there any other way to bind custom event to elements generated in YII CListview I had tried using live, and on nothing work for me here is my js file.

I think I have to call my function on every ajax load in but how can I achieve in yii

This is the script I am using to update ratings on server with button click and this the element for which these forms and buttons are defined are generated by CListview in yii

$(document).ready(function(){
    $('form[id^="rating_formup_"]').each(function() {
        $(this).live('click', function() {
            alert("hi");
            var profileid=  $(this).find('#profile_id').attr('value');
            var userid=  $(this).find('#user_id').attr('value');  
            console.log(userid);
            var data = new Object();
            data.profile_id=profileid;
            data.user_id=userid;
            data.liked="Liked";
            $.post('profile_rating_ajax.php', data, handleAjaxResponse);
            return false;     
       });
    });
});

Answer 1

The $.each method will loop only on existing elements, so the live binder will never see the ajax-generated content.

Why don’t you try it like this:

$(document).ready(function(){
  $('form[id^="rating_formup_"]').live('click', function() {
      alert("hi");
      var profileid=  $(this).find('#profile_id').attr('value');
      var userid=  $(this).find('#user_id').attr('value');  
      console.log(userid);
      var data = new Object();
      data.profile_id=profileid;
      data.user_id=userid;
      data.liked="Liked";
      $.post('profile_rating_ajax.php', data, handleAjaxResponse);
      return false;     
   });
});