Вопрос

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...
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top