“阅读更多”按钮在单击一次后无法正常工作

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中的新元素。 为了解决该问题，请使用事件委托 ，将事件从新添加的项目冒泡到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();
    });
})

例

Answer 2

您可以按照杰伊·布兰查德（Jay Blanchard）的话做，也可以像这样在附加后， read-more className元素添加click事件监听器，在原始代码中，当脚本文件被添加时，您将click事件立即附加到具有className为read-more元素上。加载时，它们当时不存在，如果您将click事件的附加位置移动到文档内部具有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();
    });



});