Can I call jQuery Colorbox on an element before it is added to the DOM?

Question

I use jQuery Colorbox which works well like so:

$(function(){
    $("a.slideshow").colorbox();
});

Now, if after page load, I add a new node (matching a.slideshow), (created or ajax'ed), then of course it does not work untile I call .colorbox() again.

I have looked around and seen the difficulty with doing this kind of thing generally. (e.g. Is there a JavaScript/jQuery DOM change listener?, http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified)

So, just in case there's a special solution for Colorbox, I am formally asking the question.

score 2 · Answer 1 · answered Jun 11 '15 at 08:04

2

Can't you re-initialise the colorbox at the point of dynamically adding a new element?

So,

$.colorbox.remove();
$("a.slideshow").colorbox();

answered Jun 11 '15 at 08:04

scgough

5,099
3
30
48

Of course, I can. But I was hoping to avoid that each time. Compare with something like this: `$(document).on('click', 'a.slideshow', function(){ //doStuff});` which will just work with each new `a.slideshow` you add. – Ifedi Okonkwo Jun 11 '15 at 08:08

score 0 · Answer 2 · answered Jun 11 '15 at 08:40

The following code works for me in Chrome using the DOMSubtreeModified event. You can click on the images as they're added.

<html>
    <head>
        <link rel="stylesheet" href="./colorbox.css">
    </head>
    <body>
        <div id="myContainer">
        </div>

        <script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="./jquery.colorbox-min.js"></script>

        <script type="text/javascript">
            $(function() {  
                  var x = 1;
                  function doColorbox() {
                    $('.gallery').colorbox({ opacity:0.5 , rel:'group1' });
                  }

                  $('#myContainer').bind("DOMSubtreeModified", doColorbox);

                  var timer = setInterval(function() {
                    $("#myContainer").append("<a class='gallery' href='./" + x + ".png'>Image " + x + "</a>");
                    x++;

                    if (x > 5) {
                        clearInterval(timer);
                    }

                  },3000);
            });
        </script>
    </body>
</html>

Ah! `setInterval` and polling continuously? What's the performance implication of this approach? — Ifedi Okonkwo, Jun 11 '15 at 09:58
The setInterval is only there to simulate the addition of new DOM elements. The real work is in the bind. — Jeff Watkins, Jun 11 '15 at 11:58

jherax · Answer 3 · 2015-06-11T09:26:39.450

The approach could be delegating events, thus no matter if an element not exists at the moment, the event will be attached when the element is created.

Here I will simulate an ajax response and it creates some elements:

//delegates the "click" event to document and namespace the event with ".nsPopup"
$(document).off(".nsPopup").on("click.nsPopup", ".open-box", function(e) {
    e.preventDefault();
    var item = $(this).data("item");
    //the element with ".open-box" class opens the colorbox
    //and display the content of a hidden element
    $.colorbox({
        html: $(".toShow-" + item).html(), //hidden element
        width: 100,
        height: 80,
        fixed: true,
        open: true,
        overlayClose: false
    });
});

//suppose we generate elements via ajax
function ajaxSuccess (data) {
    data = [1,2,3,4,5];
    var i = 0, max = data.length;
    while(i < max) {
        $("<div/>")
            .append($("<a href='#' class='open-box'/>").text("link " + data[i]).data("item", i+1))
            .append($("<div style='display:none'/>")
                .append($("<span/>").addClass("toShow-" + (i+1)).text("Hidden " + data[i])))
            .appendTo("body");
        i += 1;
    }
}

//simulates the success response
ajaxSuccess();

Hmm..This approach initializes colorbox differently ("manually") using `$.colorbox({})` and arbitrary html rather than `$('.open-box').colorbox()`. I guess I'll have to take time to see how it can possibly go with my present codebase. But in the meatime, couldn't your illustrations and element creation be simpler so as show the point in question? — Ifedi Okonkwo, Jun 11 '15 at 10:10

Can I call jQuery Colorbox on an element before it is added to the DOM?

3 Answers3