I'm using jCarousel Lite plugin in an AJAX loaded content: here's the (semplified) code
HTML:
<div id="#content">
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>ThirdItem</li>
</ul>
<div id="pager>
<a href="#" class="p1">1</a>
<a href="#" class="p2">2</a>
<a href="#" class="p3">3</a>
</div>
</div>
jQuery:
$('.ajax').click(function(){
var url = $(this).attr('href');
$('#content').load(url, null, function(response){
if (response != '') {
$('#content').jCarouselLite({
visible: 1,
scroll: 1,
circular: false,
btnGo: ['.p1', '.p2', '.p3']
});
}
});
return false;
})
All is fine so far: the AJAX content is loaded into the #content, the jCarousel Lite is attached and and the #pager links work as espected (they simply scroll the items)
Now I'd like to add some more stuff to the #pager links (like adding classes to them, or open an alert, or whatsoever): since the content is AJAX loaded, I use the .live function:
$('#pager a').live('click', function(e){
alert('hello!');
$('#pager a').removeClass('selected');
$(this).addClass('selected');
})
Well, nothing happens!
If I remove the jCarousel script (lines 5-10 from the jQuery code), all is working again
Please, can you help to make it work? And why jCarousel stops .live working? Is there a workaround?
Thanks in advance
Got it!
I found out that only #pager links were not working, so I watched the jCarousel Lite plugin code and changed line 264 (jcarousellite_1.0.1.js):
$(val).click...
With
$(val).live...