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

Question

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

As you can see on jsfiddle, I made a Readmore text that can be clicked and it's for some functions.

Using jQuery, I tried to add a button through clicking the Readmore text that uses the append() function.

But it did not work.

Why does my Readmore text click not work at all in append() - to add some button?

I want to add hello button through clicking readmore text.

Where is my problem? How can I fix it?

-Edit-

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

The issue is that

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

removes the element that "this" refers to so $(this).parent().parent() doesn't have a context to get parent from.

You can fix this by moving that line to under the add button line, ie:

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

Updated fiddle: https://jsfiddle.net/gkmuhfqt/2/

---

As an extra: $('.read_more').click(function () { should be $('.read_more', this)... or move that outside the $(".readmore_as_p").each

Answer 2

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

Parent element is not defined, because original $(this) (which is after debugging - a Read more link) is overwritten by your text, so there is no parent for not existing element in DOM.

Updated fiddle

It is better to create an anchor for original container:

var _t = $(this);

and use it later for appending of elements:

_t.append(text)

Nesting of parent().parent() is not very good practice.