Twitter引导程序:弹出窗口在第一次单击时不显示,但在第二次单击时显示

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

应该做的伎俩.

注意第.popover({trigger: 'manual')2行的调用.初始化弹出窗口并禁用它在您单击后立即出现.这没有用,因为你在AJAX回调中设置了它的内容,并且只要弹出窗口就可以了.因此,在回调中,您必须.popover('show')在设置data-content属性后手动调用.

还有一件事:你.popover('hide')在展示弹出窗口后必须在某个时刻打电话.再次单击链接时它不会消失,因为此时AJAX调用只会.popover('show')再次触发并再次调用.我能想到的一个解决方案是在弹出窗口处于活动状态时向链接添加一个类,并在每次单击时检查该类.如果该类在那里,您可以调用.popover('hide')并删除该类,否则执行您的AJAX调用.我创建了一个小jsfiddle来展示我的意思.

有关更多信息,请查看文档.

希望有所帮助.