4

入力テキストにフォーカスがあるたびにポップアップするインジケーターを作成しようとしています。ポップオーバーの内容はhtmlです。

JS

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

変更時

$('.validate').change(function() {
    var eval_me = $('.validate').val();
    $('#sample').html(eval_me);
});

HTML

    <div class="input-prepend">
        <span class="add-on"><i class="icon-lock"></i></span><input type="text" class="validate" data-placement='right' title="Hello World">
    </div>

    <div id="popover-content" style="display: none">
        <div class="row"><label id="sample">This is your div content</label></div>
    </div>

ラベル内のコンテンツは更新されますが、ポップオーバーは更新されません。ポップオーバーを閉じて、入力テキストを再度フォーカスすると（開くため）、更新されたラベルが表示されます。

どんな助けでも大歓迎です:)

4

1 に答える 1

3

2つのこと：change入力がフォーカスを失うまでイベントは発生しません。おそらく、更新コードをkeyupイベントにバインドする必要があります。次に、そのコードはdivを更新していますsampleが、ポップオーバーがトリガーされたときにポップオーバーはそのデータを取得しているだけです。ポップオーバーのdivを更新する場合は、イベントハンドラーsampleの一部として処理する必要があります。keyupそのイベントハンドラーを次のように変更してみてください。

$('.validate').keyup(function() {
  var eval_me = $('.validate').val();
  $('#sample').html(eval_me);
  $('.popover #sample').html(eval_me);
});

そして、あなたは良いはずです。フィドルを確認してください。

編集：実際に少し遊んでいるとkeyup、よりも良いトリガーのようですkeypress。そうでない場合、更新は入力を1文字追跡しますが、おそらくそこに何かが欠けています。それに応じて上記のコードを変更しました。

于 2012-09-25T03:16:00.823 に答える