58

要素の横にメッセージを表示するために bootstrap-popover を使用しています。

初めてポップオーバーに別のテキストを表示したい場合、テキストは変更されません。ポップオーバーを新しいテキストで再インスタンス化しても上書きされません。

実際の例については、この js フィドルを参照してください。

http://jsfiddle.net/RFzvp/1/

(アラート内のメッセージと dom 内のメッセージは、最初のクリック後に一貫性がありません) ドキュメントは、バインドを解除する方法について少し説明しています: http://twitter.github.com/bootstrap/javascript.html#popovers

私はこれを間違って使用していますか？回避方法に関する提案はありますか?

ありがとう

4

11 に答える 11

82

次のように、jquery データ クロージャ ディクショナリを使用してオプションに直接アクセスできます。

$('a#test').data('bs.popover').options.content = 'new content';

このコードは、最初にポップオーバーを初期化した後でも正常に動作するはずです。

于 2012-07-03T12:10:37.483 に答える
59

こんにちは、こちらのデモをご覧ください: http://jsfiddle.net/4g3Py/1/

ご希望の結果が得られるように変更を加えました。:)

私はあなたが何をしているのかをすでに知っていると思いますが、サンプルとして次のような私の端からのいくつかの推奨事項の例: http://dl.dropbox.com/u/74874/test_scripts/popover/index.html# - このリンクを共有してあなたに提供しますソース通知属性が表示される場合、別のポップオーバーを持つ別のリンクのアイデアですdata-contentが、次の変更によって必要なものが機能します。

良いものを持っていて、これが役立つことを願っています. 賛成票を投じて答えを受け入れることを忘れないでください:)

Jクエリコード

var i = 0;
$('a#test').click(function() {
    i += 1;

    $('a#test').popover({
        trigger: 'manual',
        placement: 'right',
        content: function() {
           var message = "Count is" + i;
             return message;
        }
    });
    $('a#test').popover("show");

});​

HTML

<a id="test">Click me</a>
​
于 2012-04-19T12:11:32.217 に答える
25

誰かが の再インスタンス化を伴わずpopover、コンテンツ html を変更したいだけのソリューションを探している場合に備えて、これを見てください:

$('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>")

更新:この回答が書かれてから Bootstrap 3.2.0 (私は 3.0 だと思いますか?) の間のある時点で、これは次のように少し変更されました。

$('a#test').data('bs.popover').tip().find ............
于 2012-09-11T11:14:15.303 に答える
9

質問は1年以上前のものですが、これは他の人にとって役立つかもしれません.

ポップオーバーが非表示のときにコンテンツのみが変更される場合、私が見つけた最も簡単な方法は、関数と少しの JS コードを使用することです。

具体的には、私の HTML は次のようになります。

<input id="test" data-toggle="popover"
       data-placement="bottom" data-trigger="focus" />
<div id="popover-content" style="display: none">
  <!-- Hidden div with the popover content -->
  <p>This is the popover content</p>
</div>

data-content が指定されていないことに注意してください。JS では、ポップオーバーが作成されると、コンテンツに関数が使用されます。

$('test').popover({
    html: true,
    content: function() { return $('#popover-content').html(); }
});

これで、popover-content div のどこでも変更できるようになり、次に表示されるときにポップオーバーが更新されます。

$('#popover-content').html("<p>New content</p>");

このアイデアは、HTML の代わりにプレーン テキストを使用しても機能すると思います。

于 2013-11-30T15:11:57.067 に答える
4

DOM はいつでも直接変更できます。

$('a#test').next(".popover").find(".popover-content").html("Content");

たとえば、API からいくつかのデータをロードし、ホバー時にポップオーバーのコンテンツに表示するポップオーバーが必要な場合:

    $("#myPopover").popover({
        trigger: 'hover'
    }).on('shown.bs.popover', function () {
        var popover = $(this);
        var contentEl = popover.next(".popover").find(".popover-content");
        // Show spinner while waiting for data to be fetched
        contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>");

        var myParameter = popover.data('api-parameter');
        $.getJSON("http://ipinfo.io/" + myParameter)
        .done(function (data) {
          var result = '';
          if (data.org) {
            result += data.org + '<br>';
          }
          if (data.city) {
            result += data.city + ', ';
          }

          if (data.region) {
            result += data.region + ' ';
          }
          if (data.country) {
            result += data.country;
          }
          if (result == '') {
            result = "No info found.";
          }
          contentEl.html(result);
        }).fail(function (data) {
          result = "No info found.";
          contentEl.html(result);
        });
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#" id="myPopover" data-toggle="popover" data-title="IP Details" data-api-parameter="151.101.1.69">Hover here for details on IP 151.101.1.69</a>

これは、API によって提供されるデータを信頼していることを前提としています。そうでない場合は、返されたデータをエスケープして XSS 攻撃を軽減する必要があります。

于 2016-08-18T23:47:36.280 に答える
0

ブートストラップ 5.0 アップデート

let popoverInstance = new bootstrap.Popover($('#element'));

その後：

popoverInstance._config.content = "Hello world";
popoverInstance.setContent();

(注意: ポップオーバー コンテンツをグローバルに更新するため、開いているポップオーバーが複数ある場合は、すべて「Hello world」で更新されます)

于 2021-10-22T17:46:57.210 に答える