javascript - Twitter bootstrap :Popovers are not showing up on first click but show up on second click

这是我的标记:

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

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

最佳答案

当您第一次单击链接时，尚没有初始化的弹出窗口可以显示。您可以通过调用$(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回调中设置了它的内容，并且不会立即显示弹出窗口。因此，在回调中，设置了.popover('show')属性后，现在必须手动调用data-content。

还有一件事:显示弹出窗口后，必须在某个时候调用.popover('hide')。当您再次单击该链接时，它不会消失，因为此后仅再次触发AJAX调用，并再次调用.popover('show')。我能想到的一种解决方案是，当弹出窗口处于 Activity 状态时，将一个类添加到链接中，并在每次单击时检查该类。如果存在该类，则可以只调用.popover('hide')并删除该类，否则可以进行AJAX调用。我创建了a small jsfiddle来显示我的意思。

有关更多信息look at the docs。

希望能有所帮助。

关于javascript - Twitter bootstrap :Popovers are not showing up on first click but show up on second click，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12333585/