Bootstrap 3 popover 作为嵌套的 messagebox/comment 插件

Question

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

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

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

我在这里 http://jsfiddle.net/vah791ut/

创建了一个可用的 JS Fiddle

Answer 1

怎么样this

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

Bootstrap 3 popover 作为嵌套的 messagebox/comment 插件

Bootstrap 3 popover as a nested messagebox/comment plugin

javascript

css

jquery

popover

twitter-bootstrap