在將元素添加到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嗎？

回答

相關問題