リンククリックで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
}
構文が変更されました。 Kalin C Ringkvist の答えは少し修正する必要があります:
_var popover = this.commentLink.data('popover').tip();
_
_$tip
_の代わりにメソッドtip()
に注意してください。
わーい!理解した。なぜ、ああ、なぜこれが文書化されていないのですか?私はactionscriptでの作業が恋しいです。
var popover = this.commentLink.data('popover').$tip;
var comment = popover.find('#txtComment').val();//gives correct string
ポップオーバーが表示されていないときは要素が存在しないため、このコードはポップオーバーが実際に表示されているときに実行する必要があります。
-ああ、jquery.live()の使用は非推奨ですが、ポップオーバーが作成されたら、代わりにこの$ tip変数を使用してボタン参照を取得できます。
イベントがバインドされている可変数のボタン/リンクについて、これが私がそれを行った方法です(以前に回答されたものから外れます):
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>
別のトリックを使用して、ポップオーバーの要素に関数をアタッチできるようにしました。ポップオーバーを表示する要素に別のクリックリスナーを追加しました。クリックリスナーで、タイムアウトのある関数が開始されます(たとえば、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);
});