pętla jQuery działa raz

Question

Mam niewielki problem z pętlą, którą zbudowałem. Po raz pierwszy próbowałem skonstruować pętlę za pomocą jQuery. To prosty przycisk czytaj więcej/mniej.

Problem, który mam, jest dziwny. Kiedy strona ładuje się po raz pierwszy, działa idealnie, ale w dowolnym momencie uruchamia całą sprawę bez uwzględnienia zmiany w identyfikatorze.

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'); 
     }); 
}); 

CSS: [style kotwica nie konieczny]

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

Co się dzieje (w dowolnym momencie po raz pierwszy) jest div będzie natychmiast animował do wysokości ustawionej w funkcji pierwszego kliknięcia, a następnie przeskoczy z powrotem do wysokości ustawionej za drugim kliknięciem funkcjonować.

Jeśli podzielę je na dwie różne funkcje kliknięcia, druga nie działa. Najbardziej mylące jest to, że działa raz, a następnie nie działa poprawnie. Jakieś sugestie?

Answer 1

Zastosowanie wydarzenie delegacja jeśli chcesz dynamicznie zmieniać identyfikatora ..

$('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'); 
}); 

Delegując zwiążesz do statycznego elementu nadrzędnego, który istnieje w DOM, gdy występuje wiązanie. Poradzi sobie z wydarzeniami, które pojawiają się w wyniku dynamicznego identyfikatora. Direct and Delegated Events

Answer 2

Wierzę, że po powiązaniu zdarzenia z elementem zdarzenie jest powiązane z tym konkretnym elementem, niezależnie od tego, czy później zmieni się identyfikator.

Przepisz to jako przełącznik lub użyć jQuery on ze zdarzeń delegacji Zamiast: http://api.jquery.com/on/

Answer 3

dodajesz kolejny obsługi programu obsługi kliknij, aby tego samego elementu, który jest przyczyną kłopotów.

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

Spróbuj tego (http://jsfiddle.net/balintbako/nc5Dp/):

$('#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

Prosta funkcjonalność przełączanie należy zrobić:

$('#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 >'); 
}); 

Jak sidenote, animowanie wartości zarówno w procentach i piksele mogą czasami powodować problemy.

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'); 
     }); 
});