jquery selector event not work after navigation through pager

Dear,

Here is a problem can be reproduced as per below steps, I guess something blocked jquery event.

  1. use scaffolding to setup a webapp and using CRUD function to create all pages incluing admin page for model of "OrderGoods"

  2. insert below code into "Yii::app()->clientScript->registerScript" section in admin.php


$('#order-goods-grid table tbody tr').click(function()

{

        alert($(this).children(':nth-child(2)').text());

});

  1. open localhost/webapp/index.php?r=ordergoods/admin#, click any row of the gridview, popup window appears as expected

  2. go to second page of grid through pager generated automatically, the the grid loads values normally, however, click any row of the grid, nothing happened

    with firebug, I can see elements can be found with “$(’#order-goods-grid table tbody tr’)”, but event seems not be triggered

how can it be resolved? thanks mush in advance!

http://www.yiiframework.com/forum/index.php?/topic/9300-bug-with-pagination-ajax/page__p__46079__hl__jquery+paginication#entry46079

this maybe the answer… below change make it work…

from




$('#order-goods-grid table tbody tr').click(function()

to




$('#goods-grid table tbody tr').live('click',function()

After the pagination/filtering/sorting… the grid is replaced/updated… so that the original grid is not there any more… as you use direct binding that works only with the original grid… to make your code work with future elements you need to delegate your event handlers…

You need to study a bit jQuery to see how delegate events work… check the new jQuery on() method - http://api.jquery.com/on/

thanks mdomba!