Loading slim box with .on()

Question

I am using slimbox ( http://www.digitalia.be/software/slimbox ) a very popular lightweight lightbox for jQUery.

I have used it alot in the past, however now I am a little bit stuck. I had a form that is loading via AJAX, and therefore I need to use the .on() function to activate slimbox.

But I cannot get it work. I looked at the slimbox code and it doesnt make alot of sense to me. I tried this in my :

$("#content.settings").on("click","div.scroll a.slimbox", function (e) {
        e.preventDefault();
        $(this).slimbox();
    });

And that works, but only on the second click, for some reason it takes two clicks on the same object to function. Any ideas?

Answer 1

The problem is when the element is clicked first time slimbox is not yet initialized on the element, when you click first time it gets initialized then subsequent clicks works fine.

One possible solution is to trigger the click event once the widget is initialized

$("#content.settings").on("click","div.scroll a.slimbox", function (e) {
    var $this = $(this);
    e.preventDefault();
    if(!$this.data('slimboxed')){
        $this.slimbox().data('slimboxed', true).click();
    }
});

Answer 2

One way around is to call the plugin again after the ajax request is done. So add this in your success method

$("#content.settings div.scroll a.slimbox").slimbox();