javascript - 单击一次“阅读更多”按钮将不起作用，但多次单击将不起作用

Question

这是一个小问题，但我被困住了。我在页面上的每个帖子都有一个阅读更多按钮，单击一次后将不起作用。单击它的次数与页面上帖子的数量相同。

这是我的代码:

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

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

            .content-wrapper .more-text{
                display: none;
            }
       

<div class="content-wrapper">
            <span style="color:green"><h4>{{TITLE}}</h4> </span>
            {{POST}}
        </div>
       

Answer 1

jQuery 仅在运行时识别页面中的元素，因此 jQuery 无法识别添加到 DOM 的新元素。要解决这个问题，请使用 event delegation ，从新添加的项目到 DOM 中某个点的冒泡事件，该点在 jQuery 在页面加载时运行时就在那里。许多人使用 document 作为捕获冒泡事件的地方，但没有必要一直沿着 DOM 树向上走。理想情况下you should delegate to the nearest parent existing at the time of page load.

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

您可以委托(delegate)给$('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();
    });
})

<强> EXAMPLE