Кнопка "Читать дальше" не сработает при нажатии на нее один раз, а много раз

jQuery знает только об элементах на странице во время ее выполнения, поэтому новые элементы, добавленные в DOM, не распознаются jQuery. Чтобы решить эту проблему, используйте делегирование мероприятия, восходящую цепочку событий от вновь добавленных элементов до точки в DOM, которая была там, когда jQuery запускался при загрузке страницы. Многие люди используют document как место для перехвата всплывающего события, но нет необходимости продвигаться вверх по дереву DOM. В идеале вы должны передать полномочия ближайшему родителю, существующему на момент загрузки страницы.

$(document).on('click','read-more', function(event){
    $(this).hide();
    $(this).siblings(".more-text").show();
    event.preventDefault();
});

Вы можете делегировать $('content-wrapper')

Обновлено: вы неправильно скрывали дополнительный контент. Вот весь код:

$(function() {

    var maxLength = 500;
    $(".content-wrapper").each(function() {
      var myStr = $(this).html();

      if ($.trim(myStr).length > maxLength) {
        var newStr = myStr.substring(0, maxLength);

        var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
        $(this).empty().html(newStr);
        $(this).append(' <a href = "javascript:void(0);" class = "read-more">read more...</a>');
        $(this).append('<span class = "more-text">' + removedStr + '</span>');
        $('.more-text').hide(); // <-- line added
      }
    });

    $('.content-wrapper').on('click', '.read-more', function(event) {
       $(this).hide();
       $(this).siblings(".more-text").show();
       event.preventDefault();
    });
})

ПРИМЕР

Вы можете сделать, как сказал Джей Бланчард, или вы можете просто прикрепить прослушиватели событий щелчка для элементов класса read-more после добавления таким образом, в исходном коде вы прикрепляли события щелчка к элементам с именем класса read-more сразу после загрузки файла сценария, они делают не существует в то время, если вы переместите прикрепление событий щелчка к элементам с className read-more внутри документа. уже после их добавления они будут работать:

$(function(){
    var maxLength = 500;
    $(".content-wrapper").each(function(){
        var myStr = $(this).html();
        if ($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href = "javascript:void(0);" class = "read-more">read more...</a>');
            $(this).append('<span class = "more-text">' + removedStr + '</span>');
        }
    });

    //Now that the read-more className elements exist in the DOM from .append
    //Attach the click event handlers
    $(".read-more").click(function(event){
       $(this).hide();
        $(this).siblings(".more-text").show();
        event.preventDefault();
    });



});