jQuery क्लिक फ़ंक्शन क्लास

Question

अपडेट करने के बाद काम नहीं कर रहा है एक बार जब मैं jQuery का उपयोग करके तत्व वर्ग बदलता हूं, तो क्लिक फ़ंक्शन नई कक्षा पर काम नहीं करता है। टॉगल बटन फिर से पर http://jsfiddle.net/NkG9k/1/

कोशिश क्लिक -

यहाँ मेरी कोड

jQuery('.close').on('click', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery('.open').on('click', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});​ 

आप इसे यहाँ की कोशिश कर सकते है। (यह div को फिसल नहीं जाएगा)

Answer 1

इसे आज़माएं, दस्तावेज़ पर on लागू करें और ईवेंट को अपने बटन पर संलग्न करने के लिए क्लास फ़िल्टर का उपयोग करें।

Live Demo

jQuery(document).on('click','.close', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery(document).on('click','.open', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});​ 

आप तत्व आप इस गतिशील व्यवहार चाहते हैं, ताकि जब कक्षा एक की परिवर्तित किया जाता है (open से close करने और close से open करने के लिए) के स्थिर माता पिता पर घटना को सौंपने की जरूरत है तत्व नए तत्व के अनुसार इस तत्व पर स्वचालित रूप से बाध्य होता है।

Understanding Event Delegation

घटना प्रतिनिधिमंडल एक पेरेंट तत्व, कि एक चयनकर्ता मिलान सभी सन्तान के लिए सक्रिय कर देगा करने के लिए एक भी घटना श्रोता संलग्न करने के लिए, हमें की अनुमति देता है, चाहे उन वंशजों अब मौजूद हैं या में जुड़ जाते हैं भविष्य।

Answer 2

आपने इस कार्यक्रम को ट्रिगर करने वाली कक्षा को हटा दिया है। आप इसे एक आईडी दे सकते हैं और इसे कक्षा के बजाय आईडी के साथ कॉल कर सकते हैं।

check this

jQuery('#close').toggle(function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
},function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
}); 
<div id="close" class="close">toggle</div> 

Answer 3

आप लाइव घटना के रूप में क्लिक करने के बजाय लाइव इवेंट का उपयोग करना चाहिए काम करता है जब तत्व

jQuery('.close').live('click', function() { 
    jQuery('div').slideUp(); 
    jQuery(this).addClass('open'); 
    jQuery(this).removeClass('close'); 
}); 


jQuery('.open').live('click', function() { 
    jQuery('div').slideDown(); 
    jQuery(this).addClass('close'); 
    jQuery(this).removeClass('open'); 
});​ 

Answer 4

बनाई गई है कुछ इस तरह का प्रयास करें: यदि आप

$('.close').bind('click', function() { 
$('div').toggle(); 
}); 

एनीमेशन की आवश्यकता है जिसे आप देख सकते हैं link

Answer 5

यदि आप नीचे कोड के लिए उपयोग करना चाहते हैं।

<button class="toggle">toggle</button> 
<div>THIS IS TEXT</div> 


jQuery('.toggle').toggle( 
    function() { 
     jQuery('div').slideUp(); 
    }, 
    function() { 
     jQuery('div').slideDown(); 
    } 
);