JQuery: गतिशील रूप से बनाए गए तत्वों का चयन करना और फायरबेस

Question

पर धक्का देना, इन सभी के लिए शुरुआती, फायरबेस के साथ खेलना। असल में, मैं फायरबेस से टेक्स्ट प्रविष्टियों को पुनर्प्राप्त करना चाहता हूं और इसके आगे "स्वीकृति" बटन रखना चाहता हूं। जब बटन क्लिक किया जाता है, तो मैं चाहता हूं कि उस विशिष्ट टेक्स्ट एंट्री को नए फ़ायरबेस स्थान पर धक्का दिया जाए और पाठ से हटाए गए पाठ को। मैं बटन और गतिशील रूप से पाठ बना रहा हूं और मुझे बटन और मेरे द्वारा बनाए गए div चुनने में कुछ परेशानी हो रही है। मुझे पता है कि मुझे() पर उपयोग करना है, लेकिन मुझे इसका उपयोग करने के बारे में अनिश्चितता है।

धन्यवाद!

approveRef.on('child_added', function(snapshot) { 
var posts = snapshot.val(); 
$('<div id="post">').text(posts.text).append('<button style ="button" id="approve">Approve</button>').appendTo($('#feed')); 
}); 

$('#approve').on("click", function(){ 
    var text = $('#post').val(); 
    postsRef.push({'text':text}); 
    $('#post').remove(); 

}); 

Answer 1

आप अपने गतिशील रूप से जोड़ा तत्व के एक कंटेनर पृष्ठ पर है कि पहले से ही है जब आप इसे लोड पर .on() बाध्य करने के लिए है, और इस तरह यह है:

$('#yourContainer').on('click', '#approve', function(){ 
    //your code here.. 
}); 

Answer 2

एक अन्य विकल्प, सरल समझने के लिए , कम शक्तिशाली भी पूरी तरह से वैध, बस ईवेंट बाध्य करने के लिए जब तुम तत्व पैदा करते हैं:

approveRef.on('child_added', function(snapshot) { 
var posts = snapshot.val(); 
var $button = $('<button style ="button" id="approve">Approve</button>'); 
$button.on("click", function(){ 
    var text = $('#post').val(); 
    postsRef.push({'text':text}); 
    $('#post').remove(); 
}); 

$('<div id="post">').text(posts.text).append($button).appendTo($('#feed')); 
}); 

एक अन्य समस्या आप में चलाने के लिए जा रहे हैं, वहाँ यह सोचते हैं

एक पृष्ठ पर इनमें से एक से अधिक होगा, यह है कि आप रिकॉर्ड में आईडी का उपयोग कर रहे हैं। अगर वे अद्वितीय नहीं हैं तो वे संघर्ष करने जा रहे हैं।

इन वस्तुओं को डेटा- * टैग या अन्य पहचान विशेषताओं जैसे सीएसएस टैग के साथ संदर्भित करना एक शानदार विकल्प है। लेकिन आपके मामले में, आपको बिल्कुल उनकी आवश्यकता नहीं है!

approveRef.on('child_added', function(snapshot) { 
var posts = snapshot.val(); 
var id = snapshot.name(); 

var $button = $('<button style="button">Approve</button>'); 
$button.on("click", function(){ 
    // use parent.closest(...) in place of an ID here! 
    var text = $(this).parent().closest('textarea').val(); 
    postsRef.push({'text':text}); 
    $(this).parent().remove(); 
}); 

/* just an example of how to use a data-* tag; I could now refer to this element using: 
    $('#feed').find('[data-record="'+id+'"]') if I needed to find it */ 
$('<div data-record="'+id+'">').text(posts.text).append($button).appendTo($('#feed')); 
}); 

Answer 3

आपका .on() नहीं समझे काम करते हैं, क्योंकि आप बटन गतिशील रूप से जोड़ रहे हैं। आप $('#approve') जैसे तत्व आईडी चयनकर्ता का उपयोग करके गतिशील रूप से जोड़े गए तत्वों को सीधे नहीं ढूंढ सकते हैं। तो आपको .on()$(document) चयनकर्ता के साथ बांधना चाहिए। इसमें हमेशा आपके गतिशील रूप से जोड़े गए तत्व होंगे।

$(document).on(eventName, selector, function(){});

$(document).on(click,'#approve',function(){ 
//your code here 
})