Question

I have an item inside a carousel and tied .click() event binding to it. And it is working all great, because that item is in the first page of carousel and visible right on load.

But if I move the carousel so that it becomes invisible and then move back in the viewport, the click() event isn’t working anymore?

I probably just have to register it somehow again when it is visible?

BTW Click is used to open a modal jQuery UI dialog

Thanks

Answer 1

Following you comment, I noticed indeed that the click was not working anymore when you looped through the carousel.

I don’t know exactly how this plugin works. I suppose it may re-creates the elements and the event handler is lost in the way.

An approach to resolve this is to use event delegation.
Basically you will delegate the execution of the click on .quickQoute to the a container, in your case the carousel element #inner:

$('#inner').on('click', '.quickQoute', function () {
    $("#quickQoute").dialog({ closeText: ' ' });
    $("#quickQoute").dialog("open");
    return false;
});

More on event delegation with .on()