Listview pagination and jquery

i have a script jquery like this:


when i load the page with a CListView everything is fine and the toggle function works when i click in play <a> element.

The problem is when i click on next page on CListView pagination the <a> inside the list doesnt work anymore,the toggle doesnt trigger.

May be your code looks like


So it may happen that when page loads, click event on play is binded ok. But after you change your page, .play is new and binded click event doesn’t work anymore.

Yes this is the problem but how to solve it?

Jquery have methods (live, on, bind) that allow you to bind event for all selectors, event that not on the page at document.ready.

But i already have the live,my entire script:


    var audio=new Audio();



	var ficheiro="'.Yii::app()->request->baseUrl.'/assets/audio/"+$(this).attr("id");

    $(this).toggle(function() {




				    if (audio.canPlayType) {

						if (audio.canPlayType("audio/mpeg")) {












            }, function() {








',  CClientScript::POS_READY); 

Hi zipzap,

I was having the same problem, and here’s my conclusion:

For dynamic element generated by ajax, you can’t directly bind an event to it as the binding will lost whenever the elements are updated by ajax.

Try using delegate:

Select DOM parent of the dynamic element (usually the one which encloses Clistview) and then delegate the click event to its dynamic child, in your case $(".play").

Thank you