दूसरा .click() फ़ंक्शन

Question

काम नहीं कर रहा पहला .click समारोह एक कंटेनर में एक तत्व (div) जोड़ने के लिए प्रयोग किया जाता है और दूसरा एक कंटेनर से निकालने के लिए प्रयोग किया जाता है। कंटेनर में प्रारंभ में कोई तत्व नहीं है। उस पर क्लिक करके समारोह का हटाने के

$(document).ready(function(){ 
    $(".class1").click(function(){ 
     //Code for adding element to the container and 
     // removing class1 from it and adding class2 

    }); 

    $(".class2").click(function(){ 
     alert("hi"); //Even the alert is not displayed 
     $(this).fadeOut(100);  
    }); 
}); 

काम नहीं कर रहा हालांकि, यह काम करता है, तो तत्व से पहले कंटेनर में पृष्ठ लोड पहले से ही वहाँ है। कोई कारण क्यों? क्या यह document.ready फ़ंक्शन की वजह से है? समाधान की?

Answer 1

क्योंकि जब आप .class2 तत्वों के लिए क्लिक हैंडलर जोड़ रहे हैं, तो आप केवल घटना तत्व है जो उस वर्ग के लिए जोड़ रहे हैं है कि समय में है कि विशिष्ट क्षण में ; उदाहरण के लिए कोई नहीं।

इसके बजाय, आप तो जैसे घटना प्रतिनिधिमंडल का उपयोग करने की जरूरत है;

$(document).on('click', '.class2', function() { 
    alert('hi'); 
    $(this).fadeOut(100); 
}); 

इस रूप में यह document को एक घटना (जो हमेशा मौजूद है) है, जो घटना के प्रतिनिधिमंडल का उपयोग कर किसी भी .class2 तत्वों पर क्लिक के लिए सुनता बांधता है काम करेंगे। अधिक जानकारी के लिए, on() दस्तावेज पढ़ें।

Answer 2

आप क्लिक करने के .class2 यह अभी तक नहीं बनाया गया है के रूप में मैं समझता हूँ कोड जोड़ने की कोशिश के रूप में। कोशिश क्लिक करें घटना को जोड़ने के बाद आप .class2 तत्व इस तरह बनाया:

$(document).ready(function(){ 
    $(".class1").click(function(){ 
      //Code for adding element to the container and removing class1 from it and adding class2 

     $(".class2").click(function(){ 
      alert("hi");   //Even the alert is not displayed 
      $(this).fadeOut(100); 

     }); 
    }); 
}); 

Answer 3

दोनों कक्षाओं के लिए प्रतिनिधि ईवेंट हैंडलर का उपयोग करें (यदि आप दोनों के बीच टॉगल करते हैं, या यदि आप class1 पर वापस नहीं आते हैं तो दूसरा एक पर्याप्त है) क्योंकि class तत्वों को बदलने के बाद तत्वों को गतिशील माना जाता है।

$("#container").on("click", ".class1", function(){ 

}); 

$("#container").on("click", ".class2", function(){ 

}); 

यहाँ #container उन वर्ग के माता-पिता को संदर्भित करता है, तो आप कुछ और ही हो सकता है।

Answer 4

घटनाओं तत्वों है कि वहाँ जब समारोह सविस्तार है नहीं कर रहे हैं पर ढाला नहीं जा सकता। लेकिन, अगर आप इस तरह एक आवरण तत्व (div) के आसपास "Class1" और "class2", बना सकते हैं:

<div id="class1_wrapper"> 
    <span class="class1"> 
</div> 

मैं, "काल" का इस्तेमाल किया Class1 के लिए क्योंकि मैं नहीं जानता कि जो तत्व यह है। इस तरह से

$("#class1_wrapper").on("click", ".class1", function() 
{ 
    //Code for adding element to the container and removing class1 from it and adding class2 
}); 

, भले ही Class1 वहाँ नहीं है (एक ही class2 के लिए किया जा सकता है), क्लिक करें घटना

चलेंगे: फिर, क्लिक करें घटना के बजाय, आप "पर()" इस्तेमाल कर सकते हैं