jQuery लूप एक बार

Question

काम करता है मेरे पास एक लूप के साथ मामूली समस्या है। यह पहली बार है जब मैंने jQuery का उपयोग करके लूप बनाने की कोशिश की है। यह एक साधारण और अधिक/कम बटन पढ़ा जाता है।

मेरे पास जो मुद्दा है वह एक अजीब है। जब पृष्ठ पहले लोड होता है तो यह पूरी तरह से काम करता है, लेकिन उसके बाद किसी भी समय, यह आईडी में परिवर्तन पर विचार किए बिना पूरी चीज चलाता है।

HTML:

<div class="inner_container" id="tag_info"><?php?></div> 
<a id="read_more">read more ></a> 

jQuery:

$('a#read_more').click(function() { 
    $('#tag_info').stop().animate({ 
     height: '100%' 
     }, 500); 
    $(this).text('< read less'); 
    $(this).removeAttr('id'); 
    $(this).attr('id', 'read_less'); 
     $('a#read_less').click(function() { 
      $('#tag_info').stop().animate({ 
       height: '50px' 
       }, 500); 
      $(this).text('read more >'); 
      $(this).removeAttr('id'); 
      $(this).attr('id', 'read_more'); 
     }); 
}); 

सीएसएस: [लंगर शैलियों आवश्यक नहीं]

#tag_info { 
height: 50px; 
overflow: hidden; 
} 

क्या (पहली बार के बाद किसी भी समय) होता है div है पहले क्लिक फ़ंक्शन में ऊंचाई सेट को तुरंत एनिमेट कर देगा, और फिर दूसरे क्लिक में ऊंचाई सेट पर वापस कूदें समारोह।

यदि मैं उन्हें दो अलग-अलग क्लिक फ़ंक्शंस में अलग करता हूं, तो दूसरा काम नहीं करता है। सबसे भ्रमित चीज यह है कि यह एक बार काम करता है, फिर ठीक से काम करने में विफल रहता है। कोई सुझाव?

Answer 1

उपयोग घटना प्रतिनिधिमंडल आप गतिशील रूप से परिवर्तित करने के लिए पहचान पत्र ..

$('body').on('click','#read_more',function() { 
    $('#tag_info').stop().animate({ 
     height: '100%' 
    }, 500); 
    $(this).text('< read less').attr('id', 'read_less'); 
}); 

$('body').on('click','#read_less',function() { 
    $('#tag_info').stop().animate({ 
     height: '50px' 
    }, 500); 
    $(this).text('read more >').attr('id', 'read_more'); 
}); 

आप एक स्थिर पेरेंट तत्व है कि डोम में मौजूद न होने पर बाध्यकारी होता है करने के लिए बाध्य सौंपकर चाहते हैं। यह घटनाओं को संभाल देगा क्योंकि वे आपके गतिशील आईडी से बबल हो जाते हैं। Direct and Delegated Events

Answer 2

मेरा मानना ​​है कि जब आप किसी तत्व को किसी ईवेंट को बाध्य करते हैं, तो ईवेंट उस विशिष्ट तत्व से बंधेगा, भले ही आप बाद में आईडी बदलते हों या नहीं।

एक टॉगल के रूप में इस पुनर्लेखन या jQuery के on बजाय घटना प्रतिनिधिमंडल के साथ उपयोग

: http://api.jquery.com/on/

Answer 3

आप एक ही तत्व है, जो मुसीबत खड़ी कर रहा है करने के लिए क्लिक करें हैंडलर में एक और हैंडलर जोड़ रहे हैं। दोनों प्रतिशत और पिक्सेल में मूल्यों एनिमेट कभी कभी समस्याएं हो सकती हैं, एक sidenote के रूप

$('#read_more').on('click', function() { 
    var state = $(this).text() == 'read more >'; 
    $('#tag_info').stop().animate({ 
     height: (state ? '100%' : '50px')}, 500); 
    $(this).text(state ?'< read less' : 'read more >'); 
}); 

:

$('#read_more').click(function() { 
    if ($(this).hasClass("more")) { 
     $('#tag_info').stop().animate({ 
      height: '100%' 
     }, 500); 
     $(this).text('< read less'); 
    } else { 
     $('#tag_info').stop().animate({ 
      height: '50px' 
     }, 500); 
     $(this).text('read more >'); 
    } 
    $(this).toggleClass("more"); 
}); 

Answer 4

एक सरल टॉगल कार्यक्षमता करना चाहिए:

$('a#read_less').click(function() { 
    $('#tag_info').stop().animate({ 
     height: '50px' 
    }, 500); 
    $(this).text('read more >'); 
    $(this).removeAttr('id'); 
    $(this).attr('id', 'read_more'); 
}); 

इस (http://jsfiddle.net/balintbako/nc5Dp/) की कोशिश करो।

FIDDLE

Answer 5

Change your script as follows: 

$('a#read_more').live("click",function() { 
    $('#tag_info').stop().animate({ 
     height: '100%' 
     }, 500); 
    $(this).text('< read less'); 
    $(this).removeAttr('id'); 
    $(this).attr('id', 'read_less'); 
     $('a#read_less').live("click",function() { 
      $('#tag_info').stop().animate({ 
       height: '50px' 
       }, 500); 
      $(this).text('read more >'); 
      $(this).removeAttr('id'); 
      $(this).attr('id', 'read_more'); 
     }); 
});