32

这是我的标记：

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

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

4

1 回答 1

27

当您第一次单击链接时，还没有初始化弹出框，可以显示。您通过调用来初始化弹出框$(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')再次调用。我能想到的一种解决方案是在弹出框处于活动状态时向链接添加一个类，并在每次单击时检查该类。如果该类在那里，您可以调用.popover('hide')并删除该类，否则进行 AJAX 调用。我创建了一个小的 jsfiddle来说明我的意思。

有关更多信息，请查看文档。

希望有帮助。

于 2012-09-08T19:35:51.030 回答