使用引導彈出窗口中的交互式元素

我成功在鏈接點擊上使用引導彈出窗口。我在popover中有一些表單元素：一個文本框，一個複選框和一個按鈕。我可以使用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 
}

來源

2012-06-01 Kalin C Ringkvist

夥計，你讓我的一天！我至少需要2個小時才能從popover中獲得價值。你的解決方案效果很好。謝啦！ – teMkaa

如果您需要保留HTML屬性的狀態，請參閱此git問題：https://github.com/twitter/bootstrap/issues/4097 – webXL

耶！弄清楚了。爲什麼，哦爲什麼這沒有記錄？我想念動作。

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

該代碼必須在popover實際可見時運行，因爲元素在不可見時不存在。

-Oh，並且不推薦使用jquery.live（），但可以在創建彈出窗口時使用此$ tip變量來獲取按鈕引用。

來源

2012-06-04 17:49:35

謝謝，這表明我朝着正確的方向 – Alp

語法已更改。的Kalin C Ringkvist答案需要稍微修改：

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

注意方法tip()而不是$tip。

來源

2012-06-21 11:12:45 Alp

從Bootstrap 3.0開始，語法是'this.commentLink.data（「bs.popover」）。$ tip' – vrutberg

對於按鈕有事件綁定/鏈接數量可變的，這裏是我做到了（什麼是以前回答會關閉）：

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-08 15:33:21 timborden

嘿，我真的不明白你做了什麼。它在html中看起來如何？ – Chanckjh

@Chanckjh有幫助嗎？ – timborden

我用另一種技巧，能夠連接功能的流行元素。我只是在顯示彈出窗口的元素上添加了另一個點擊偵聽器。在點擊監聽器中，啓動一個有一些超時的函數（例如500毫秒）。該功能啓動後，您應該能夠訪問您的popover元素。這裏是代碼：

 <!-------- 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-22 13:04:01 maddob

使用引導彈出窗口中的交互式元素

回答

相關問題