Response title
This is preview!
HTML:
<div id="#content">
<!-- start of ajax loaded content -->
<div class="jcarousel">
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>ThirdItem</li>
</ul>
</div>
<div id="pager>
<a href="#" class="p1">1</a>
<a href="#" class="p2">2</a>
<a href="#" class="p3">3</a>
</div>
<!-- end of ajax loaded content --></div>
jQuery:
$('.ajax').click(function(){
var url = $(this).attr('href');
$('#content .jcarousel').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
$("#formMain").validate({
// some validation (rules, messages, etc.) here...
submitHandler: function(form) {
$("input[type=submit]").attr("disabled", "disabled");
form.submit();
}
});
<div id="test"></div>
...
$(document).ready(function(){
// load first picture onLoad
$("#test").load("/picture.asp?iData=1");
// load next picture when clicking on "#next" link
$('#next').click(function(event){
event.preventDefault(); // don't open the page
$("#test").load($('#next').attr('href')); // load it!
});
// load prev picture when clicking on "#prev" link
$('#prev').click(function(event){
event.preventDefault(); // don't open the page
$("#test").load($('#prev').attr('href')); // load it!
});
});
<img src="<%= rs.("Picture") %>" />
<a href="/picture.asp?iData=<%= prevRecord %>" id="prev">Previous</a>
<a href="/picture.asp?iData=<%= nextRecord %>" id="next">Next</a>
© 2013 jQuery Foundation
Sponsored by and others.