更新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弹出窗口内容

回答

相关问题