Question

我在链接点击上成功使用了bootstrap popover。我在popover中有一些表单元素：textfield，checkbox和button。我能够使用jquery.live（）附加一个按钮监听器，但在该按钮监听器中，我似乎没有任何正确的表单元素的访问权限。如果我在控制台日志中跟踪它们，它们就存在，但它们的值始终保持原始默认值，所以如果我去$（'＃txtComment'）。val（）;无论我把什么放进场地，这个字符串总是一样的。

是否有任何示例，教程或源代码我可以看一下在引导程序弹出窗口中使用任何类型的交互性的东西？

这就是我设置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
}

Answer 1

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

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

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

Answer 2

耶！弄清楚了。为什么，为什么没有记录？我想念在actionscript中工作。

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

当弹出窗口实际可见时，必须运行此代码，因为元素在不可见时不存在。

-Oh，并且不推荐使用jquery.live（），但是一旦创建了popover，你就可以使用这个$ tip变量来获取按钮引用。

Answer 3

对于包含事件绑定的可变数量的按钮/链接，这是我如何做到的（关闭之前已回答的内容）：

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>

Answer 4

我使用了另一个技巧来将函数附加到popover中的元素。我刚刚在显示弹出框的元素上添加了另一个单击侦听器。在单击侦听器中，启动具有一些超时的函数（例如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);
        });

在引导程序弹出窗口中使用交互式元素

4 个答案: