更新Bootstrap彈出窗口內容

我試圖創建一個指標，只要輸入的文本聚焦就會彈出。 popover的內容是html。更新Bootstrap彈出窗口內容

$('.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>

拉貝里面的內容我得到更新，但popover不是。關閉彈出窗口並重新輸入文字（打開它）會顯示更新後的標籤。

任何幫助表示讚賞:)

來源

2012-09-25 Kevin D.

你怎麼激活你的popover？另外，把它扔在一個jsFiddle或codepen中會幫助 – jessh

它在輸入被聚焦時被激活，當我初始化popover時觸發：'focus'' –

兩樣東西：change事件不火，直到輸入失去焦點，你可能要更新代碼綁定到keyup事件。其次，雖然代碼是更新您的sample div，彈出窗口只是在觸發彈出窗口時獲取該數據;如果您想更新彈出窗口的sample div，則需要將其作爲keyup事件處理程序的一部分進行處理。嘗試更改事件處理程序，如下所示：

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

並且您應該很好。檢查fiddle。

編輯：其實用它打了一下，好像keyup比keypress更好的觸發，否則更新由一個落後字符輸入，但我可能只是失去了一些東西在那裏。相應地更改了上面的代碼。

來源

2012-09-25 03:16:00 ultranaut

是的，認爲它與'change'沒有被解僱有關！謝謝！ –

另外我剛剛注意到，你可能想讓'sample'成爲一個類而不是一個id，這樣你就不會因爲重複的id而結束了，'因爲這是不對的。 – ultranaut

更新Bootstrap彈出窗口內容

回答

相關問題