Question

我使用jQuery Colorbox，效果很好：

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

现在，如果页面加载后，我添加了一个新节点（匹配a.slideshow），（创建或ajax'ed），那么当然它不起作用我再次调用.colorbox()。< / p>

我环顾四周，看到了做这种事情的困难。（例如Is there a JavaScript/jQuery DOM change listener?，http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified）

所以，为了防止Colorbox有一个特殊的解决方案，我正式提出这个问题。

Answer 1

无法在动态添加新元素时重新初始化颜色框吗？

所以，

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

Answer 2

以下代码适用于Chrome，使用DOMSubtreeModified事件。您可以在添加图像时单击它们。

<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>

Answer 3

该方法可以委托事件，因此无论目前是否存在元素，都会在创建元素时附加事件。

这里我将模拟一个ajax响应并创建一些元素：

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

在将元素添加到DOM之前，我可以在元素上调用jQuery Colorbox吗？

3 个答案: