Блог

Я пытаюсь использовать всплывающие окна начальной загрузки для отображения ошибок. Код работает хорошо только после первого нажатия на кнопку. При следующих щелчках всплывающее окно отображается, но сразу же исчезает.

Добавлен простой помощник для повторного использования всплывающих окон:

 var popoverHelper = function (selector) {
    var $element = $(selector);
    $element.popover({
        placement: "bottom",
        trigger: 'manual'
    });
    return {
        showPopover: function (text) {
            $element.attr('data-content', text);
            $element.popover('show');
        },
        hidePopover: function () {
            $element.popover('hide');
        },
        destroyPopover: function () {
            $element.popover('destroy');
        }
    };
};
  

Использование помощника:

 var pHelper = popoverHelper('#postInput');

$('#postButton').click(function (e) {
    e.preventDefault();
    // hide open popover if open
    pHelper.hidePopover();
    ...
    // some functionality
    ...
    // show popover if some errors  
    pHelper.showPopover('error occurs!!');
});
  

Используемый jQuery — 2.1.1, начальная загрузка Twitter — 3.1.1.

Полный образец в jsfiddle.

Небольшое примечание: если я вызываю popover destroy и если я повторно инициализирую всплывающее окно при показе, все работает хорошо. Но я думаю, что это не оптимально.

Пример Jsfiddle.

Проверьте эту демонстрационную скрипку

Лучшим решением было бы скрыть всплывающее окно при действиях пользователя в поле ошибки.

 $('input').focus(function(){
     pHelper.hidePopover();
});