web-dev-qa-db-ja.com

bootstrap popover内でインタラクティブ要素を使用する

リンククリックでbootstrapポップオーバーを正常に使用しています。ポップオーバー内にテキストフィールド、チェックボックス、ボタンなどのフォーム要素があります。jqueryを使用してボタンリスナーをアタッチできます。 live（）ですが、そのボタンリスナー内では、正しいフォーム要素にアクセスできないようです。コンソールログでトレースすると存在しますが、値は常に元のデフォルトのままなので、$ （ '#txtComment'）。val（）;フィールドに何を入力したかに関係なく、文字列は常に同じです。

bootstrap popover内であらゆる種類の双方向性を使用しているものの例、チュートリアル、またはソースコードはありますか？

これが私がポップオーバーを設定する方法です：

this.commentLink.popover({
  trigger: 'manual',
  placement: 'right',
  html : true,
  content: function () {
    return $('#commentPopout').html();
  }
}).popover('hide');

//jquery.on won't work here so we use live
$('#btnSubmitComment').live('click', this.proxy(this.commentSubmitClick));

それから私はそれをうまく表示するためにこれをやっています：

this.commentLink.popover('show');

これはボタンクリック機能です：

commentSubmitClick: function(e){
  console.log($('#txtComment').val());//always shows default text regardless of what I've actually typed in the field
}
jquerytwitter-bootstrappopover
18
Kalin C Ringkvist

構文が変更されました。 Kalin C Ringkvist の答えは少し修正する必要があります：

_var popover = this.commentLink.data('popover').tip();
_

_$tip_の代わりにメソッドtip()に注意してください。

19
Alp

わーい！理解した。なぜ、ああ、なぜこれが文書化されていないのですか？私はactionscriptでの作業が恋しいです。

var popover = this.commentLink.data('popover').$tip;
var comment = popover.find('#txtComment').val();//gives correct string

ポップオーバーが表示されていないときは要素が存在しないため、このコードはポップオーバーが実際に表示されているときに実行する必要があります。

-ああ、jquery.live（）の使用は非推奨ですが、ポップオーバーが作成されたら、代わりにこの$ tip変数を使用してボタン参照を取得できます。

15
Kalin C Ringkvist

イベントがバインドされている可変数のボタン/リンクについて、これが私がそれを行った方法です（以前に回答されたものから外れます）：

var list = $('<ul/>');
myCollections.items.each(function(item){
    var row = $('<li/>');
    row.append(item.get('id')));
    row.append($('<a/>').addClass('delete').html('remove'));
    list.append(row);
});

$(this.el).find('a').popover({ content: list }).on('click', function(){
    var popover = $(this).data('popover').tip();
    $(popover).find('.delete').on('click', removeitem);
});

function removeitem(){ // code to remove the item here }

// The HTML (in the popover) would look like this:
<ul>
    <li>1<a class="delete">remove</a></li>
    <li>2<a class="delete">remove</a></li>
    <li>3<a class="delete">remove</a></li>
</ul>
1
timborden

別のトリックを使用して、ポップオーバーの要素に関数をアタッチできるようにしました。ポップオーバーを表示する要素に別のクリックリスナーを追加しました。クリックリスナーで、タイムアウトのある関数が開始されます（たとえば、500ミリ秒）。関数が開始されると、ポップオーバー要素にアクセスできるようになります。コードは次のとおりです。

        <!-------- HTML ----------->
        <a class="btn" id="popover_btn">show popover</a>

        /******* JAVASCRIPT *******/
        $('#popover_btn').popover({
            html: true,
            placement: 'top',
            trigger: 'click',
            title: 'add new value',
            content: '<input id="ttt" type="text"/>'
        });

        $('#popover_btn').click(function() {
            setTimeout(function() {
                // here you can write your "ON SHOW" code
                console.debug($('#ttt').length);        // Outputs 1 - the element is there
            }, 500);
        });
0
maddob