实施例

Question

我有一个问题，隐藏引导程序popover只会重置popover中textarea的文本内容。我的页面中有很多这些，它们是在循环中动态创建的（int i是计数器）。这是我的HTML：

<button class="btn btn-sm" data-toggle="popover" data-container="body" data-title="FOR EVALUATOR'S ATTENTION" type="button" data-html="true" @*id="commentPopOver-@i"*@ @*onclick="getAttention(@i)"*@>
    <span class="glyphicon glyphicon-pencil"></span>
</button>
<div class="popoverContent" style="display: none !important">
    <div class="form-group">
        <input name="values[@i].AttentionComment" id="comment-@i" hidden />
        <textarea class="form-control" onchange="updateText(@i)" id="commentText-@i" rows="3">someText</textarea>
    </div>
</div>

和我的JS：

$(function () {
    $("[data-toggle=popover]").popover({
        html: true,
        content: function () {
            return $('.popoverContent').html();
        }
    });
})

现在我明白它只是在加载时使用它的默认文本重新创建弹出窗口，但它应该至少在关闭/隐藏后保留textarea的更改和值。我写了这个JS试图让它填充一个单独的隐藏输入来包含该值，即使在重置后但它不起作用：

function updateText(id) {
    var newtext = $('#commentText-' + id).val();
    $('#comment-' + id).val(newtext);
}

有什么想法吗？

Answer 1

当您使用content: function () {return $('.popoverContent').html();}设置工具提示的内容时，工具提示内容会返回$('.popoverContent').html(); HTML代码的副本.textarea也是一个副本，而不是对您原始textarea的引用DOM。

当工具提示打开时，插件会在DOM中插入带有随机唯一ID的HTML（包括上面提到的副本）。该插件还会在触发工具提示的元素（您的案例中的按钮）中插入aria-describedby属性。 aria-describedby包含与工具提示相同的唯一ID。

现在您可以使用'hide.bs.popover`事件。当工具提示关闭时，您应该将工具提示中的textarea内容复制到DOM中的（隐藏）文本区域

实施例

HTML：

<button type="button" id="po1" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
  Popover on right
</button>

<div class="popoverContent" style="display: none !important">
    <div class="form-group">

        <textarea class="form-control"  rows="3">someText 1</textarea>
    </div>
</div>
<br>
<button type="button" id="po2" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
  Popover on right
</button>

<div class="popoverContent" style="display: none !important">
    <div class="form-group">
        <textarea class="form-control"  rows="3">someText 2</textarea>
    </div>
</div>

的javascript：

$("[data-toggle=popover]").each(function( index ) {

var that = $(this);
        $(this).popover({
        html: true,
        content: function () {
              return $('#' + $(this).attr('id') + ' + .popoverContent').html();
        } 
        });    
});



$('[data-toggle=popover]').on('hide.bs.popover', function () {
     $('#' + $(this).attr('id') + ' + .popoverContent textarea').html( $('#' + $(this).attr('aria-describedby') + ' .popover-content textarea').val());
});

演示：http://www.bootply.com/DvOYV12bHg

Bootstrap Popover与textarea重置文本值

1 个答案:

实施例

HTML：

的javascript：