Attach JS events for a list view when the page changes

I have a few click/hover events I want to attach to items in a list view, but when changing pages using the default ajax buttons (1, 2, etc) the events are not attached to the new items…

I’ve tried using afterAjaxUpdate in my index.php, but it only seems to update the items when they are loaded initially, and not when the page changes:


<?php $this->widget('zii.widgets.CListView', array(

	'dataProvider'=>$dataProvider,

	'itemView'=>'_view',

	'afterAjaxUpdate'=>'attachLinkEvents()',

)); ?>



How can I catch when new items are loaded and reattach my JavaScript events?

Jquery’s live() will make you happy, now and in the future :)

Well, I tried live and it works for fine the click functions, but hover seemed to have the same result, where it wouldn’t work after a new set of items got loaded.

Additionally I read that live is depreciated as of jQuery 1.7, and so I’ve been trying (where possible) to explore other alternatives.

This is what I tried with live:




	$('.viewItem')

	.live('mouseenter',function(){

		$(this).find('.itemMenu').show();

	})

	.live('mouseleave',function(){

		$(this).find('.itemMenu').hide();

	});

As its own documentation states, use .on() instead.

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

Just for kicks I tried:


	$('.viewItem')

	.on('mouseenter',function(){

		$(this).find('.itemMenu').show();

	})

	.on('mouseleave',function(){

		$(this).find('.itemMenu').hide();

	});

and I get the same result as .hover (works on the first page, but not after the page is changed), as it should be I believe.

Is it not possible to capture when the view page is changed? I was hoping there was an event I could attach my handler to.