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

使用jQuery彩盒效果很好，像这样：现在在将元素添加到DOM之前，我可以在元素上调用jQuery Colorbox吗？

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

，如果页面加载后，我加入（匹配a.slideshow）一个新的节点，（创建或ajax'ed），那么当然它不工作untile我再次打电话.colorbox()。

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

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

来源

2015-06-11 Ifedi Okonkwo

您不能在动态添加新元素的位置重新初始化colorbox吗？

所以，

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

来源

2015-06-11 08:04:43 scgough

当然，我可以。但我希望每次都避免这种情况。比较类似这样的：'$（document）.on（'click'，'a.slideshow'，function（）{// doStuff}）;'这将适用于每个新添加的'a.slideshow'。 –

下面的代码使用DOMSubtreeModified事件对我的作品在Chrome中。您可以在添加图片时点击图片。

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

来源

2015-06-11 08:40:30

啊！ 'setInterval'并继续轮询？这种方法的性能意味着什么？ –

setInterval仅用于模拟添加新的DOM元素。真正的工作是有约束力的。 –

的方法可委托的事件，因而不管元素不存在的那一刻，该事件将被创建元素时连接。

在这里，我将模拟的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();

来源

2015-06-11 09:16:41 jherax

嗯..这种方法使用'.colorbox（{}）'和任意html而不是'$（'。open-box'）。colorbox（）'来区别地初始化colorbox（“手动”）。我想我必须花时间看看它如何能够与我现在的代码库一起使用。但在这个美好时光中，你的插图和元素创作是否更简单，以表明这一点？ –

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

回答

相关问题