Not working for dynamically created container

[skizzo]

Hi,
how can I use Chocolat on a div that contains dynamically created (jQuery / .html() function) images? After calling the .Chocolat() function on the div with dynamic content and clicking on a link, the page redirects to the image instead of opening it in the Chocolat lightbox.
Thanks!

[nicolas-t]

Hi,

There is no "refresh" function for the moment.
One solution would be to call chocolat $('selector').Chocolat() after elements are dynamically added.

Maybe i can help you more if you provide some code snippets.

Best regards,

[matyus]

I think I'm having the same issue?

An example would be:

$('#container').load('/foo.html #container .image');

$('#container').Chocolat();

Let's say I'm on index.html, and I load an array of elements (.image) into the #container on index.html… when I call Chocolat() it doesn't register the dynamically loaded elements.

[matyus]

I suspect there's an issue with this.element.find(this.settings.imageSelector); in the constructor. With dynamically loaded content, you'd need to opt for delegation, so you'd have to do something like this.element.on('click.chocolat', this.settings.imageSelector, function(){}); but then of course things get more complicated when trying to find the index of the given element.

[nicolas-t]

@matyus Hi !
In your case you just need to use deferred callback for example :

$('#container').load('/foo.html #container .image', function() {
    $('#container').Chocolat();
});

[matyus]

@nicolas-t oh wow, thanks! I totally forgot .load takes a callback.

[nicolas-t]

i'm closing, feel free to reopen if you have any question