Twitter bootstrap:弹出窗口不会在第一次点击时出现，但会在第二次点击时出现
这是我的标记：
<a href="#" class="reviews" id="like" rel="popover" data-content="" data-placement="right" data-original-title="Like episode">
<i class="icon-thumbs-up"></i>
Loved it
</a>(<span id="episode_likes">{{ episode_likes }}</span>这是JavaScript：
$('a.reviews#like').click(function(e){
var element = $(this);
$.ajax({
url: '/episoderatings/like/',
type: 'POST',
dataType: 'json',
data: {
csrfmiddlewaretoken: '{{ csrf_token }}',
episode_number: current,
story: current_story
},
success: function(response){
if(response=='You have liked this episode'){
$('span#episode_likes').text(parseInt($('span#episode_likes').text())+1);
}
$(element).attr('data-content',response);
$(element).popover();
}
});
e.preventDefault();
});问题是，当我点击“喜欢”按钮时，第一次点击时弹出窗口不会出现，所以无论我是否喜欢这个页面，我都会错过重要的回复。当我点击“喜欢”按钮时，第二次弹出窗口就会出现，然后它就会保持切换行为。有什么想法吗？
回答 1
Stack Overflow用户
发布于 2012-09-09 03:35:51
当你第一次点击你的链接时，还没有弹出窗口初始化，这可能会显示出来。您可以通过调用$(element).popover();来初始化弹出窗口。因此，您的代码在单击链接后初始化弹出窗口，第一次没有显示任何内容。第二次单击它时，弹出窗口就会出现并显示出来。
您必须在单击链接之前调用.popover()。在你的情况下
$('a.reviews#like')
.popover({trigger: 'manual'})
.click(function(e){
var element = $(this);
$.ajax({
url: '/episoderatings/like/',
type: 'POST',
dataType: 'json',
data: {
csrfmiddlewaretoken: '{{ csrf_token }}',
episode_number: current,
story: current_story
},
success: function(response){
if(response=='You have liked this episode'){
$('span#episode_likes').text(parseInt($('span#episode_likes').text())+1);
}
$(element).attr('data-content',response).popover('show');
}
});
e.preventDefault();
});应该能行得通。
注意第2行中对.popover({trigger: 'manual')的调用，它初始化弹出窗口，并禁止在单击后立即显示弹出窗口。这不会有什么帮助，因为您在AJAX回调中设置了它的内容，而且弹出窗口很快就会显示出来。因此，在回调中，在设置了data-content属性之后，您现在必须手动调用.popover('show')。
还有一件事:您必须在显示弹出窗口后的某个时刻调用.popover('hide')。当您再次单击该链接时，它不会消失，因为此后只会再次触发AJAX调用，并再次调用.popover('show')。我能想到的一种解决方案是在弹出窗口激活时向链接中添加一个类，并在每次单击时检查该类。如果该类存在，您可以只调用.popover('hide')并删除该类，否则执行AJAX调用。我创建了a small jsfiddle来说明我的意思。
有关更多信息，请访问look at the docs。
希望这能有所帮助。
https://stackoverflow.com/questions/12333585
复制相似问题
腾讯云开发者
