jQuery फ़ंक्शन संलग्न करने के बाद प्रतिक्रिया नहीं दे रहे हैं()

Question

मैं div बॉक्स की एक श्रृंखला बना रहा हूं जो उपयोगकर्ताओं को jQuery के साथ प्रत्येक बॉक्स से आइटम जोड़ने/निकालने देता है। मुझे लगता है कि जब मैं एक बॉक्स में एक नया तत्व जोड़ता हूं, तो उस तत्व पर क्लिक किया गया क्लिक फ़ंक्शन जवाब नहीं देगा।

$(".add").click(function() { 
$("#targetbox").append("<span class='remove'>This element was added</span>"); 
}); 

$(".remove").click(function() { 
alert("removing"); 
$(this).remove(); 
}); 

मैं पहले से भर तो आइटम के साथ #targetbox, वे क्लिक समारोह का जवाब: यहाँ मेरी कोड की तरह दिखता है मोटे तौर पर क्या हो रहा है। यह केवल वे आइटम हैं जो गतिशील रूप से जोड़े गए हैं जो फ़ंक्शन का जवाब नहीं देते हैं।

Answer 1

अपने नव संलग्न तत्व

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>") 
    .bind("click",function(e) { 
     alert("removing"); 
     $(this).remove(); 
    }); 
}); 

को सीधे क्लिक विधि जोड़ें या .live() विधि है कि किसी भी नए .remove तत्वों

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>"); 
}); 

$(".remove").live("click", function() { 
    alert("removing"); 
    $(this).remove(); 
}); 

Answer 2

आपका कोड वर्तमान में$('.remove') में सभी तत्वों के लिए क्लिक ईवेंट को संभालता है।
कोई भी तत्व जो अभी तक मौजूद नहीं है, प्रभावित नहीं हैं।

आपको .live() या .delegate विधियों को कॉल करने की आवश्यकता है, जो चयनकर्ता से मेल खाने वाले सभी तत्वों के लिए ईवेंट को संभालेगा, चाहे वे बनाए गए हों।

उदाहरण के लिए:

$(".remove").live('click', function() { 
    alert("removing"); 
    $(this).remove(); 
}); 

Answer 3

यह क्योंकि जब अपने कोड चलाता है, आइटम अभी तक नहीं जोड़ा जाता है। ऐड क्लिक फ़ंक्शन के दौरान इसे जोड़ने के बाद आपको अपने नए ब्लॉक को गतिशील रूप से असाइन करने के लिए निकालें क्लिक फ़ंक्शन को जोड़ने की आवश्यकता है।

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>"); 
    // Add code here for .remove click function 
});