Question

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

正如你在jsfiddle上看到的那样，我创建了一个Readmore文本，可以点击它，它适用于某些功能。

使用jQuery，我尝试通过点击使用Readmore功能的append()文字添加按钮。

但它没有用。

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

我想通过点击hello文字添加readmore按钮。

我的问题在哪里？我该如何解决？

- 编辑 -

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

删除＆＃34; this＆＃34;是指$(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中没有父元素。

Updated fiddle

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

var _t = $(this);

稍后使用它来追加元素：

_t.append(text)

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

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

2 个答案: