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

CSS: [стилей анкерные не нужно]

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

Что происходит (в любое время после того, как в первый раз) является ДИВ будет мгновенно изменяться до высоты, установленной в первой функции щелчка, а затем вернуться к высоте, заданной во втором клике функция.

Если я отделяю их на две разные функции щелчка, вторая не работает. Самое сложное в том, что он работает один раз, а затем не работает должным образом. Какие-либо предложения?

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

Делегировав привязываются к статическому родительский элемент, который существует в DOM, когда связывание происходит. Он будет обрабатывать события, поскольку они пузырятся из ваших динамических идентификаторов. Direct and Delegated Events

Answer 2

Я считаю, что когда вы привязываете событие к элементу, событие привязывается к этому конкретному элементу, независимо от того, измените ли вы его позже.

Перепишите это как тумблер или использовать JQuery-х on с делегацией событий вместо: http://api.jquery.com/on/

Answer 3

Вы добавляете другой обработчик в обработчик щелчка к тому же элементу, который вызывает тревогу.

$('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/):

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

Простая функциональность переключение должен делать:

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

В Замечание, анимировать значения как в процентах и ​​пикселей иногда может вызвать проблемы.

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