Bootstrap 带有文本区域重置文本值的弹出框

Question

我有一个问题，隐藏 bootstrap 弹出窗口只会重置弹出窗口中我的文本区域的文本内容。我的页面中有很多这样的东西，它们是在循环中动态创建的（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();
        }
    });
})

现在我明白了，它只是在加载时使用默认文本重新创建弹出窗口，但它至少应该保留文本区域 closed/hidden 之后的更改和值。我写了这个 JS 来尝试让它填充一个单独的隐藏输入以包含即使在重置后的值，但它没有用：

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

有什么想法吗？

Answer 1

当您使用 content: function () {return $('.popoverContent').html();} 设置工具提示的内容时，工具提示内容是 HTML 代码 return 的副本 $('.popoverContent').html(); 文本区域也是复制而不是引用 DOM.

中的原始文本区域

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

现在您可以使用“hide.bs.popover”事件。当工具提示关闭时，您应该将工具提示中文本区域的内容复制到 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 带有文本区域重置文本值的弹出框

Bootstrap Popover with textarea resetting text value

html

javascript

css

jquery

twitter-bootstrap

例子

HTML:

javascript: