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 ，并且第一次没有显示任何内容。第二次单击它时，弹出框就在那里并可以显示。

在点击链接之前，您必须拨打.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调用。我创建a small jsfiddle来表明我的意思。

了解更多信息look at the docs。

希望有所帮助。

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

1 个答案: