Javascript jQuery-Append（）无法在单击元素时添加按钮

jsfiddle：

正如您在JSFIDLE上看到的，我制作了一个可以点击的

Readmore

文本，用于一些函数

使用jQuery，我试图通过单击使用

append（）

函数的

Readmore

文本来添加一个按钮

但它没有起作用

为什么我的

Readmore

文本在

append（）

-中单击完全不起作用以添加一些按钮

我想通过单击

readmore

text添加

hello

按钮

我的问题在哪里？我怎样才能修好它

-编辑-

html:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4"  style="border:0.5px; border-style: solid;">
              <div class="media">
                <div class="media-left media-top" style="">
                  <img src="https://6dbaudio.files.wordpress.com/2013/08/imgp0746.jpg" class="media-object pull-left img-circle" style="width:70px; height:70px;">
                </div>
                <div class="media-body" style="">
                  <p><h4 class="media-heading">hello</h4></p>
                  <p class="readmore_as_p">Lorem ipsum dolor sit amet, consesit amet, consesit amet, consesit amet, consesit amet, consesit amet, consesit amet, consesit amet, consesit amet, consectetur.
                  </p>
                 </div>
                </div>
        </div>

你好

Lorem ipsum door sit amet，consesit amet，consesit amet，consesit amet，consesit amet，consesit amet，consesit amet，consesit amet，consesit amet，consesit amet。

javascript:

$(".readmore_as_p").each(function () {

    var original_str = $(this).text();
    console.log("hi");
    if (original_str.length>20) {
        var subtracted_str = original_str.substr(0, 20);
        var p_plus_readmore_str = '<p class="readmore_before" data="' + original_str + '">' + subtracted_str + '...</p>';
        var link_read_more = '<a class="read_more"><p>Read more</p></a>';
        $(this).parent().children('p.readmore_as_p').html(p_plus_readmore_str+link_read_more);

        $('.read_more').click(function () {
            var originaltext = $(this).parent().children('p.readmore_before').attr('data');
            $(this).parent().html(originaltext);

            //Here is problem starting. What i ask is here.
            var text = '<div class="media" style="">\n' +
    '                    <div class="media-body text-center" style="">\n' +
    '                        <button class="btn btn-warning" style="">hello</button>' +
    '                    </div>\n' +
    '                </div>\n';
            $(this).parent().parent().append(text);
                             //To here
        });
    }
    else {
    }
});

$（“.readmore\u as\u p”）。每个（函数（）{
var original_str=$（this）.text（）；
控制台日志（“hi”）；
如果（原始长度>20）{
var减去的_str=原始_str.substr（0,20）；
var p_plus_readmore_str='
'+subtracted_str+'…
'；
var link_read_more='read more
'；
$（this）.parent（）.children（'p.readmore\u as\u p'）.html（p\u plus\u readmore\u str+link\u readmore）；
$（'.read_more'）。单击（函数（）{
var originaltext=$（this.parent（）.children（'p.readmore_before'）.attr（'data'）；
$（this.parent（）.html（originaltext）；
//问题开始了，我要问的是。
变量文本='\n'+
“\n”+
“你好”+
“\n”+
“\n”；
$（this.parent（）.parent（）.append（text）；
//到这里
});
}
否则{
}
});

问题在于

$(this).parent().html(originaltext);

删除“this”引用的元素，因此

$（this）.parent（）.parent（）

没有从中获取父级的上下文

您可以通过将该行移动到“添加”按钮行下来解决此问题，即：

$(this).parent().parent().append(text);
$(this).parent().html(originaltext);

更新小提琴：

---

作为额外的：

$（'.read_more'）。单击（函数（）{

应该是

$（'.read_more'，this）.

或将其移到

$（“.readmore As_p”）。每个

$(this).parent().parent().append(text);

未定义父元素，因为原始$（this）（调试后-一个Read more链接）被文本覆盖，所以DOM中不存在的元素没有父元素

最好为原始容器创建锚点：

var _t = $(this);

然后将其用于元素的附加：

_t.append(text)

---

嵌套parent（）.parent（）不是很好的做法。

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。（不在JSFIDLE上）请更新您的问题，使用堆栈代码段（工具栏按钮

[]

）将问题放入问题中。这个问题很难阅读和理解。如果您要添加一个提琴，您也可以将代码添加到问题中为什么不创建代码段？为什么只发布代码块？您花了时间使其在JSFIDLE上可运行（至少，我认为它是可运行的）。对不起，下次我会更加小心。