एक डायनामिक रूप से तैयार तत्व

Question

लिए jQuery colorbox प्लगइन जोड़े एक लिंक पर रंग बॉक्स कार्यक्षमता आवंटित करने के लिए हमेशा की तरह इस तरह है:

$("a.colorbox").colorbox({ transition: "elastic" });

नए जोड़े गए आइटम इस तरह यद्यपि में बाध्य नहीं कर रहे हैं।

गतिशील रूप से

<a class="colorbox"></a>

तत्वों को बनाने के लिए मैं रंग बॉक्स कैसे जोड़ सकता हूं? (इस उदाहरण में .colorbox जैसे)

Answer 1

method described here तत्वों में आपकी रुचि है पर click घटना के लिए जीना-बाँध करने के लिए है और कॉल हैंडलर में colorbox पुस्तकालय समारोह:

$('.colorbox').live('click', function() { 
    $.colorbox({href:$(this).attr('href'), open:true}); 
    return false; 
}); 

Answer 2

आप भी इस कोशिश कर सकते:

$('.colorbox').live('click',function(e){ 
    e.preventDefault(); 
    $(this).colorbox({open:true}); 
}); 

मुझे लगता है कि यह एक छोटे क्लीनर तो fn आदेश का उपयोग कर रहा है।

Answer 3

यह पोस्ट पुराना है लेकिन यह दूसरों की मदद कर सकता है: simonthetwit समाधान ठीक है, लेकिन आपको दो बार ट्रिगर लिंक पर क्लिक करना होगा। कलरबॉक्स को सीधे कहा जा सकता है, इसलिए यह काम करना चाहिए:

$('.colorbox').live('click',function(e){ 
     e.preventDefault(); 
     $.colorbox({open:true}); 
     //inline example 
     //$.colorbox({inline:true, width:"50%", href:"#inline_content"}); 
}); 

चीयर्स!

Answer 4

मुझे ट्यूनर लिंक पर क्लिक करने के साथ @sunburst के समान समस्या थी। .live() के बजाय उसी कोड का उपयोग किया गया, लेकिन .delegate()। सबकुछ हल किया और मेरी jQuery को अच्छी तरह साफ कर दिया!

नाइस यहाँ स्पष्टीकरण: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Answer 5

लाइव के रूप में मूल्यह्रास हुआ है, तो आप

$('body').on('click', '.colorbox', function() { 
    $('.colorbox').colorbox({rel: $(this).attr('rel')}); 
}); 

इस कोड पर का उपयोग करना चाहिए भी समूहीकरण अनुमति देता है।

Answer 6

यहाँ समाधान मैं ईवेंट सक्रिय करने दो बार लिंक पर क्लिक की आवश्यकता होगी, से बचने के लिए मिल गया था:

$(document.body).delegate('.<my-class>', 'click', function(e) { 
    e.preventDefault(); 
    $('.<my-class>').colorbox({<my-code>}) 
});