Javascript Twitter 引导程序：弹出框不会在第一次点击时出现，而是在第二次点击时出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12333585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap:Popovers are not showing up on first click but show up on second click
提问by Rajat Saxena
This is my markup:
这是我的标记：
<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>
And this is the JavaScript:
这是 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();
});
The problem is when I click on 'like' button, the popover doesn't show up on the first click so I miss the important response whether I've liked the page or not. When I click on the 'like' button, the second time popover shows up and it then maintains its toggle behaviour from there onwards. Any ideas?
问题是当我单击“喜欢”按钮时，第一次单击时不会显示弹出窗口，因此无论我是否喜欢该页面，我都会错过重要的回复。当我点击“喜欢”按钮时，第二次弹出窗口出现，然后从那里开始保持其切换行为。有任何想法吗？
采纳答案by j0ker
When you first click on your link, there is no popover initialized yet, that could be shown. You initialize the popover with the call to $(element).popover();. So, your code initializes the popover afterthe click on the link and nothing is shown the first time. The second time you click it, the popover is there and can be shown.
当你第一次点击你的链接时，还没有初始化的弹出窗口，可以显示。您通过调用 来初始化弹出窗口$(element).popover();。因此，您的代码在单击链接后初始化弹出窗口，并且第一次不显示任何内容。第二次单击它时，弹出窗口就在那里并且可以显示。
You must make the call to .popover()before the link is clicked. In your case
您必须.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();
});
should do the trick.
应该做的伎俩。
Notice the call to .popover({trigger: 'manual')in line 2. That initializes the popover and disables that it appears at once after you clicked. That wouldn't be helpful, since you set its content in the AJAX callback, and no sooner the popover can be shown. So, in the callback, you must now call .popover('show')manually, after you have set the data-contentattribute.
请注意第.popover({trigger: 'manual')2 行中的 调用。这将初始化弹出窗口并禁用它在您单击后立即显示。这不会有帮助，因为您在 AJAX 回调中设置了它的内容，并且很快就会显示弹出窗口。因此，在回调中，您现在必须.popover('show')在设置data-content属性后手动调用。
One more thing: You have to call .popover('hide')at some point after you showed the popover. It will not disappear when you click on the link again, since then the AJAX call is only triggered once more and .popover('show')is called again. One solution I can think of is adding a class to the link when the popover is active and check for that class on each click. If the class is there, you can just call .popover('hide')and remove the class, else do your AJAX call. I created a small jsfiddleto show what I mean.
还有一件事：你必须.popover('hide')在显示弹出窗口后的某个时候调用。当您再次单击该链接时它不会消失，因为这样 AJAX 调用只会.popover('show')再次触发并再次调用。我能想到的一个解决方案是在弹出窗口处于活动状态时向链接添加一个类，并在每次单击时检查该类。如果该类在那里，您可以调用.popover('hide')并删除该类，否则进行 AJAX 调用。我创建了一个小的 jsfiddle来展示我的意思。
For more info look at the docs.
有关更多信息，请查看文档。
Hope that helps.
希望有帮助。
