18

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

ブートストラップ ポップオーバー内で何らかの種類の対話機能を使用している例、チュートリアル、またはソース コードはありますか?

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

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
}
4

4 に答える 4

19

構文が変更されました。Kalin C Ringkvistの回答を少し変更する必要があります。

var popover = this.commentLink.data('popover').tip();

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

于 2012-06-21T11:12:45.660 に答える
15

わーい！理解した。なぜ、ああ、なぜこれが文書化されていないのですか？アクションスクリプトでの作業が恋しいです。

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

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

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

于 2012-06-04T17:49:35.940 に答える
1

イベントがバインドされている可変数のボタン/リンクの場合、これが私が行った方法です(以前に回答されたものから外れます):

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>
于 2012-10-08T15:33:21.317 に答える
0

ポップオーバーの要素に関数をアタッチできるようにするために、別のトリックを使用しました。ポップオーバーを表示する要素に別のクリック リスナーを追加しました。クリック リスナーでは、タイムアウトのある関数が開始されます (たとえば、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);
        });
于 2013-01-22T13:04:01.827 に答える