Twitter bootstrap: Popovers не появляются при первом щелчке, но отображаются на втором клике

Это моя разметка:

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

Проблема заключается в том, что когда я нажимаю кнопку "как", popover не появляется при первом щелчке, поэтому я пропускаю важный ответ, понравилась ли мне страница или нет. Когда я нажимаю кнопку "как", второй раз появляется popover, и затем он поддерживает, что он переключает поведение оттуда. И идеи?

Ответы

Ответ 1

Когда вы сначала нажимаете на свою ссылку, еще нет инициализации popover, которая может быть показана. Вы инициализируете popover вызовом $(element).popover();. Таким образом, ваш код инициализирует 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();
    });

должен сделать трюк.

Обратите внимание на вызов .popover({trigger: 'manual') в строке 2. Инициализирует popover и отключает его сразу после нажатия. Это не помогло бы, так как вы установили свой контент в обратном вызове AJAX, и как только появится всплывающее окно. Итак, в обратном вызове вы должны теперь вызывать .popover('show') вручную, после того, как вы установите атрибут data-content.

Еще одна вещь: вы должны позвонить .popover('hide') в какой-то момент после того, как вы указали popover. Он не исчезнет, ​​когда вы снова нажмете на ссылку, так как тогда вызов AJAX запускается только один раз, а .popover('show') вызывается снова. Одним из решений, о котором я могу думать, является добавление класса к ссылке, когда popover активен и проверяет этот класс при каждом нажатии. Если класс существует, вы можете просто вызвать .popover('hide') и удалить класс, а также выполнить вызов AJAX. Я создал небольшой jsfiddle, чтобы показать, что я имею в виду.

Для получения дополнительной информации просмотрите документы.

Надеюсь, что это поможет.