Правильное добавление ссылок read_more/read_less в абзацы с использованием jquery

Question

У меня есть куча абзацев внутри div, а одна из них имеет ссылку read_more. Все абзацы, которые появляются после ссылки read_more внутри одного и того же div, по умолчанию скрыты.

Когда READ_MORE нажата, она отображает все эти пункты, которые приходят после READ_MORE и добавляет read_less ссылку в конце последнего абзаца. Когда щелчок read_less щелкнут, он скрывает все абзацы до read_more, снова показывает ссылку read_more и прячется сам.

Я почти там, пожалуйста, посмотреть здесь: http://jsfiddle.net/g8tevwb1/

$('p').find('a.read_more').parent().nextAll().hide(); 

$('a.read_more').click(function(){ 
    $(this).parent().nextAll().show(); 
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>'); 
    $(this).hide(); 
    return false; 
}); 

$('a.read_less').click(function(){ 
    $(this).parent().prevUntil('a.read_more').hide(); 
    $(this).hide(); 
    return false; 
}); 

Я просто не удается получить read_less работает. Я делаю что-то неправильно, добавляя ссылку read_less таким образом? Я могу манипулировать им, изменять цвета и т. Д., Но функция щелчка не работает.

Важно, чтобы все это происходило внутри div, в котором они содержатся, поскольку у меня есть другие абзацы внутри других div с другими кнопками read_more, и я не хочу, чтобы они были затронуты.

Любая помощь приветствуется!

Answer 1

Поскольку динамическое добавление ссылки read_less, вы должны использовать метод jQuery .on().

$('p').find('a.read_more').parent().nextAll().hide(); 

$('p').on('click', 'a.read_more', function(){ 
    $(this).parent().addClass('first'); 
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>'); 
    $(this).parent().nextAll().show(); 
    $(this).hide(); 
    return false; 
}); 

$('p').on('click', 'a.read_less', function(){ 
    $(this).parent().prevUntil('p.first').andSelf().hide(); 
    $('a.read_more').show(); 
    $(this).remove(); 
    return false; 
}); 

Fiddle

Я также исправлена ​​небольшая ошибка в read_less клик обратного вызова. Я думаю, что это то поведение, которое вы хотели. Вот post, связанный с динамически добавленными элементами.

Примечание

Если строго не требуется, вы можете избежать добавления и удаления read_less ссылку динамически. Это позволит упростить код следующим образом

$('p').find('a.read_more').parent().nextAll().hide(); 

$('a.read_more').click(function(){ 
    $(this).parent().addClass('first'); 
    $(this).parent().nextAll().show(); 
    $(this).hide(); 
    return false; 
}); 

$('a.read_less').click(function(){ 
    $(this).parent().prevUntil('p.first').andSelf().hide(); 
    $('a.read_more').show(); 
    return false; 
}); 

Fiddle