Twitter bootstrap：弹出窗口未在第一次单击时显示，但在第二次单击时显示

Question

这是我的标记：

<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();
});

问题是当我点击“喜欢”按钮时，弹出框不会在第一次点击时出现，所以无论我是否喜欢该页面，我都会错过重要的回复。当我单击“喜欢”按钮时，会出现第二次弹出窗口，然后从那里开始保持其切换行为。有任何想法吗？

Answer 1

当您第一次单击链接时，还没有初始化弹出框，可以显示。通过调用$(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。

希望对您有所帮助。