18

我在点击链接时成功使用了引导弹出框。我在弹出框内有一些表单元素：一个文本字段、复选框和一个按钮。我可以使用 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
}
4

4 回答 4

19

语法改变了。Kalin C Ringkvist的答案需要稍作修改：

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

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

于 2012-06-21T11:12:45.660 回答
15

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

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

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

-哦，不推荐使用 jquery.live() ，但是一旦创建了弹出框，您可以使用此 $tip 变量来获取按钮引用。

于 2012-06-04T17:49:35.940 回答
1

对于绑定了事件的可变数量的按钮/链接，这是我的做法（脱离之前已回答的内容）：

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-08T15:33:21.317 回答
0

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