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（）並不是很好的做法。