Twitter Bootstrap可禁用弹出窗口在第一次点击时不起作用?

时间:2014-12-25 12:36:28

标签: jquery twitter-bootstrap bootstrap-popover

我的jQuery表现得非常奇怪。在页面加载时第一次单击按钮/锚点时,它不会展开popover div。但是jQuery正在运行并且正在执行console.log语句。只有在单击按钮/锚点一次,然后单击页面上的其他内容然后返回以单击按钮才会执行预期的按钮。我无法理解这种行为。请指导。

$('.BookAppButton').click(function(event){
    event.preventDefault();
    console.log("Button Clicked..");
    $('.BookAppButton').popover({
        title : '',
        html : 'true',
        content:'<div><p>I should have popped on first click</p></div>'
    });
});

这是JSFiddle链接。如果您运行代码,您将理解我所说的奇怪行为: http://jsfiddle.net/8yyjyte1/#&togetherjs=B36bVLS1R7

提前谢谢。

1 个答案:

答案 0 :(得分:1)

您在单击处理程序中调用的代码用于准备弹出窗口,而不是用于显示它。你应该在.click函数之外调用它,bootstrap js会在目标焦点上自动显示它,在这种情况下你的a

所以它应该是这样的:

// -- this is not needed anymore
$('.BookAppButton').click(function (event) {
    event.preventDefault();
    console.log("Button Clicked..");

});

// this should be directly in your 'ready' function
$('.BookAppButton').popover({
    title: '',
    html: 'true',
    content: '<div><p>I should have popped on first click</p></div>'
});

和小提琴:http://jsfiddle.net/cewkazk6/