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

您也许可以委托给$('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

Answer 2

您可以按照杰伊·布兰查德（Jay Blanchard）所说的做，也可以像这样附加后就为read-more className元素附加单击事件监听器，在原始代码中，您是将click事件附加到className为{{1}的元素上}在脚本文件加载后立即消失，当时还不存在，如果您将click事件的附加位置移动到文档内部具有className read-more的元素上。准备好附加它们后，它们将起作用：< / p>

read-more

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

2 个答案: