Twitter bootstrap：Popovers没有出现在第一次点击，但显示在第二次点击 [英] 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：

And this is the 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();
});

问题是当我点击喜欢按钮时，popover不会首次点击显示，所以我想念重要的回应，不管我是否喜欢该页面。当我点击喜欢按钮第二次popover出现，然后维持它从那里切换行为。和想法？

The problem is when I click on 'like' button,popover doesn't show up on first click so I miss the important response whether I've liked the page or not.When I click on the 'like' button the second time popover shows up and it then maintains it's toggle behavior from there onwards.And ideas?

推荐答案

当您第一次点击您的链接时，没有弹出窗口已初始化，可以显示。您可以通过调用 $（element）.popover（）; 来初始化popover。所以，您的代码在链接上的点击后初始化popover ，第一次显示任何内容。您第二次点击它时，弹出窗口就可以显示。

When you first click on your link, there is no popover initialized yet, that could be shown. You initialize the popover with the call to $(element).popover();. So, your code initializes the popover after the click on the link and nothing is shown the first time. The second time you click it, the popover is there and can be shown.

您必须拨打 .popover（）链接被点击之前。在你的情况下

You must make the call to .popover() before the link is clicked. In your case

$('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'）。初始化popover，并在单击后立即显示它。这不是有用的，因为您将其内容设置为AJAX回调，并且一旦可以显示popover。因此，在回调中，您必须手动调用 .popover（'show'），然后设置数据内容属性。

Notice the call to .popover({trigger: 'manual') in line 2. That initializes the popover and disables that it appears at once after you clicked. That wouldn't be helpful, since you set its content in the AJAX callback, and no sooner the popover can be shown. So, in the callback, you must now call .popover('show') manually, after you have set the data-content attribute.

还有一件事：你必须在某些地方调用 .popover（'hide'）在你显示popover之后。当您再次点击链接时，它不会消失，因为AJAX调用再次被触发，并且再次调用 .popover（'show'）。我可以想到的一个解决方案是在popover活动时向链接添加一个类，并在每次点击时检查该类。如果该类在那里，您可以调用 .popover（'hide'）并删除该类，否则执行AJAX调用。我创建了一个小jsfiddle 来显示我的意思。

One more thing: You have to call .popover('hide') at some point after you showed the popover. It will not disappear when you click on the link again, since then the AJAX call is only triggered once more and .popover('show') is called again. One solution I can think of is adding a class to the link when the popover is active and check for that class on each click. If the class is there, you can just call .popover('hide') and remove the class, else do your AJAX call. I created a small jsfiddle to show what I mean.

更多信息查看文档。

希望帮助。

这篇关于Twitter bootstrap：Popovers没有出现在第一次点击，但显示在第二次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！