Bootstrap 3 弹出框作为嵌套的消息框/评论插件答案

【问题标题】：Bootstrap 3 popover as a nested messagebox/comment pluginBootstrap 3 弹出框作为嵌套的消息框/评论插件
【发布时间】：2015-01-09 06:44:20
【问题描述】：

我正在制作一个评论插件。在一个页面上可以有多个评论框。输入评论后，它应立即显示在评论框中。我已经为此构建了一个示例，但我遇到了 2 个基本问题

当我从一个评论框中输入评论时，它会正确输入，但当我移动到第二个和第三个框时，cmets 会重复。
当我离开弹出框时，输入的 cmets 将被删除。

HTML

<i type="button" class="glyphicon glyphicon-plus chatboxPlugin" data-content='sadf' data-container="body" data-toggle="popover" data-placement="bottom" data-html=true ></i>
<br>

<i type="button" class="glyphicon glyphicon-plus chatboxPlugin" data-content='sadf' data-container="body" data-toggle="popover" data-placement="bottom" data-html=true ></i>
<br>

<i type="button" class="glyphicon glyphicon-plus chatboxPlugin" data-content='sadf' data-container="body" data-toggle="popover" data-placement="bottom" data-html=true ></i>
    <br>

脚本

$('.chatboxPlugin').on('show.bs.popover', function () {
    content ="<div class='row'> \
    <div class='col-xs-12 commentArea'> \
        <div class='row'> \
          <div class='col-xs-11 pull-left'> \
            <p><i class='fa fa-user'>&nbsp;</i>Hi.....</p> \
          </div> \
        </div> \
        <div class='row'> \
          <div class='col-xs-11 col-xs-offset-1 text-right pull-right'> \
           <p> Hey..........&nbsp;<i class='fa fa-user'></i></p> \
          </div> \
        </div> \
    </div>\
    <div class='col-xs-12'> \
        <div class='row'> \
          <div class='col-xs-12'> \
            <div class='input-group'> \
                <input type='text' class='form-control comment' placeholder='Add Your Comment&hellip;'> \
                <span class='input-group-btn'> \
                   <button type='submit' class='btn btn-default addComment'><i class='glyphicon glyphicon-plus'></i></button> \
                </span> \
            </div> \
          </div> \
        </div> \
    </div> \
</div>";
    $(this).attr({'data-content':content});
    $('body').on('click','.addComment',function(e){
        e.preventDefault(e);
        content = $(this).parents().eq(5);
        commentArea = content.children('.commentArea');
        // alert(commentArea.html());
        comment = "<div class='row'> \
          <div class='col-xs-11 col-xs-offset-1 text-right pull-right'> \
           <p>"+$(this).parents().eq(1).children('.comment').val()+" <i class='fa fa-user'></i></p> \
          </div> \
        </div> ";
        commentArea.append(comment);
        return;
    })


})

$('[data-toggle="popover"]').popover();

我在这里创建了一个可以工作的 JS Fiddle http://jsfiddle.net/vah791ut/

【问题讨论】：

标签： javascript jquery css twitter-bootstrap popover

【解决方案1】：

this怎么样

我使用jquery的data方法保存数据

【讨论】：