Javascript 阅读更多按钮赢得'；我不想点击它一次而是多次

这是一个小问题，但我被卡住了。我有一个阅读更多按钮，用于页面上的每一篇文章，点击一次都不起作用。它的工作原理是点击次数与页面上的帖子数量相同

这是我的密码：

$（函数（）{
var maxLength=500；
$（“.content wrapper”）.each（函数（）{
var myStr=$（this.html（）；
如果（$.trim（myStr）.length>maxLength）{
var newStr=myStr.substring（0，maxLength）；
var removedStr=myStr.substring（maxLength，$.trim（myStr.length））；
$（this.empty（）.html（newStr）；
$（此）。附加（“”）；
$（this.append（“”+removedStr+“”）；
}
});
});
$（“.read more”）。单击（函数（事件）{
$（this.hide（）；
$（this.sides（“.more text”）.show（）；
event.preventDefault（）；
});
.content包装器。更多文本{
显示：无；
}


{{TITLE}}
{{POST}}
jQuery在运行时只知道页面中的元素，因此添加到DOM中的新元素无法被jQuery识别。为了解决这个问题，我们使用了从新添加的项到DOM中某个点的冒泡事件，当jQuery在页面加载上运行时，这个点就在DOM中。许多人使用
document
作为捕获冒泡事件的地方，但并不需要一直向上遍历DOM树。理想的

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

$（函数（）{
var maxLength=500；
$（“.content wrapper”）.each（函数（）{
var myStr=$（this.html（）；
如果（$.trim（myStr）.length>maxLength）{
var newStr=myStr.substring（0，maxLength）；
var removedStr=myStr.substring（maxLength，$.trim（myStr.length））；
$（this.empty（）.html（newStr）；
$（此）。附加（“”）；
$（this.append（“”+removedStr+“”）；
$（'.more text'）.hide（）；//jQuery在运行时只知道页面中的元素，因此添加到DOM中的新元素无法被jQuery识别。为了解决这个问题，使用时，从新添加的项中冒泡事件直到DOM中的某个点，而jQuery在页面加载时就在该点。许多人使用
文档
作为捕捉冒泡事件的地方事件，但不必一直向上遍历DOM树

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

$（函数（）{
var maxLength=500；
$（“.content wrapper”）.each（函数（）{
var myStr=$（this.html（）；
如果（$.trim（myStr）.length>maxLength）{
var newStr=myStr.substring（0，maxLength）；
var removedStr=myStr.substring（maxLength，$.trim（myStr.length））；
$（this.empty（）.html（newStr）；
$（此）。附加（“”）；
$（this.append（“”+removedStr+“”）；
$（'.more text'）.hide（）；//您可以按照Jay Blanchard所说的那样做，或者您可以在像这样附加后，立即为
read more
className元素附加click事件侦听器，在原始代码中，加载脚本文件时，您会立即将click事件附加到className
read more
的元素，如果是y，则它们当时不存在ou将单击事件的附加移动到文档内部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();
    });



});

$（函数（）{
var maxLength=500；
$（“.content wrapper”）.each（函数（）{
var myStr=$（this.html（）；
如果（$.trim（myStr）.length>maxLength）{
var newStr=myStr.substring（0，maxLength）；
var removedStr=myStr.substring（maxLength，$.trim（myStr.length））；
$（this.empty（）.html（newStr）；
$（此）。附加（“”）；
$（this.append（“”+removedStr+“”）；
}
});
//现在，DOM from.append中存在readmore className元素
//附加单击事件处理程序
$（“.read more”）。单击（函数（事件）{
$（this.hide（）；
$（this.sides（“.more text”）.show（）；
event.preventDefault（）；
});
});
您可以按照Jay Blanchard所说的那样做，或者您可以在像这样附加后，立即为
读取更多
类名元素附加单击事件侦听器。在原始代码中，加载脚本文件时，您会立即将单击事件附加到具有类名
读取更多
的元素，如果您可以将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();
    });



});

$（函数（）{
var maxLength=500；
$（“.content wrapper”）.each（函数（）{
var myStr=$（this.html（）；
如果（$.trim（myStr）.length>maxLength）{
var newStr=myStr.substring（0，maxLength）；
var removedStr=myStr.substring（maxLength，$.trim（myStr.length））；
$（this.empty（）.html（newStr）；
$（此）。附加（“”）；
$（this.append（“”+removedStr+“”）；
}
});
//现在，DOM from.append中存在readmore className元素
//附加单击事件处理程序
$（“.read more”）。单击（函数（事件）{
$（this.hide（）；
$（this.sides（“.more text”）.show（）；
event.preventDefault（）；
});
});
@JayBlanchard在OP的代码中，他们的代码在文档外部运行。就绪，因此它在修改DOM之前运行，并包含类名为“read more”的附加元素。在这个答案中，单击事件的附加是在对文档内部的DOM进行附加之后完成的。readyYou应该用你的an解释一下