Chud37
Chud37

Reputation: 5027

Loading slim box with .on()

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?

Upvotes: 1

Views: 230

Answers (2)

Spokey
Spokey

Reputation: 10994

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();

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388416

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();
    }
});

Upvotes: 3

Related Questions