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

Question

jsfiddle： https ://jsfiddle.net/gkmuhfqt/1/

正如您在jsfiddle上看到的那样，我编写了一个Readmore文本，可以单击它，该文本用于某些功能。

使用jQuery，我试图通过单击使用append()函数的Readmore文本来添加一个按钮。

但这没有用。

为什么我的Readmore文本单击在append()根本不起作用-添加一些按钮？

我想通过单击readmore文本添加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>

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

Answer 1

问题是

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

删除“ this”所指的元素，因此$(this).parent().parent()没有上下文可作为获取父对象的上下文。

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

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

更新小提琴： https ： //jsfiddle.net/gkmuhfqt/2/

---

另外： $('.read_more').click(function () {应该是$('.read_more', this)... 或将其移至$(".readmore_as_p").each

Answer 2

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

未定义父元素，因为原始$（this）（在调试后-阅读更多链接）被文本覆盖，因此DOM中不存在的父元素没有父元素。

更新的小提琴

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

var _t = $(this);

并在以后将其用于附加元素：

_t.append(text)

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