JQuery - Twitter Bootstrap - закрыть все Popovers на тела каких-либо элементов фокус

Question

Я пытаюсь закрыть любой popover открывается, когда any body element (не сам поповер) is focused,

так я делаю:

$(document.body).on('focus focusout focusin', function(e) { 
    if(e.target.classList.contains('popover')){return false;} 
    else{ 
    $('*').popover('hide'); 
    } 
    // code to close the popover 
}); 

это отлично работает на Chrome, но не на FF, на FF Мне нужно, чтобы focusin and focusout перед закрытием.

вот мой пример работает только для хрома: http://jsfiddle.net/CU5U5/4/

Как я могу это исправить?

Answer 1

Альтернатива:

$(document).on('focus', ':not(.popover)', function(){ 
    $('.popover').popover('hide'); 
}); 

Edit:

Так как выясняется, мой выше ответ неправильный. Вам нужно вызвать .popover ('hide') в элементе, который был создан popover ... не сам .popover. И вам нужно прекратить распространение события клика по ссылке (т. Е. Вернуть значение false в обработчике кликов), чтобы он не дошел до корня документа. См. Это для ответа, http://jsfiddle.net/aFacG/1/.

HTML

<a data-content="a popover" id="mypopover" href="#">click me</a> 

JS

$(document).ready(function(){ 
    $("#mypopover").popover(); 

    $(document).on('click', function(){ 
     $("#mypopover").popover('hide'); 
    }); 

    $('#mypopover').click(function(){ 
     return false; 
    }); 
}); 

Answer 2

Проблема с текущим общепринятом ответом является то, что поповер скрывает даже при нажатии кнопки в подсказке (плохо, если у вас есть элемент, который вы хотите, чтобы взаимодействовать с внутри popover..like поля ввода).

Используйте метод stopPropagation на контейнере для перемещения, чтобы предотвратить событие скрыть от DOM.

UPDATE (начальной загрузки URL изменен): http://jsfiddle.net/bNvX7/10/

$(document).ready(function(){ 

    //Initialize popover on element 
    $("#mypopover").popover(); 

    //Attach click handler to document 
    $(document).bind('click', function (e) { 
     $("#mypopover").popover('hide'); 
    }); 

    //Dont hide when I click anything inside #container 
    $('#container').bind('click', function(e) { 
     e.stopPropagation(); 
    }); 
}); 

Answer 3

Вот несколько более общий подход, который требует только один обработчик и работает для всех Popovers где тумблер/ссылка содержит атрибут данных отн = «поповер», например:

HTML

<a href="#" data-rel="popover">toggle</a> 

JS

$(document).on('click', function(event) { 
    var $clicked = $(event.target); 

    if ($clicked.closest('[data-rel="popover"]').length) { 
     return; 
    } else if ($clicked.closest('.popover').length) { 
     event.stopPropagation(); 
    } else { 
     $('[data-rel="popover"]').popover('hide'); 
    } 
    }); 

Answer 4

Может быть, вы могли бы попробовать это:

 // Part 1: initialize the popver 
     var button = template.find(".itemInfo button"); 
     // add a class name to identify the target later. 
     button.addClass("popover-toggle"); 

     var content = $("<div>test</div>"); 

     button.popover({ 
      container:"body", 
      content: content, 
      html:true, 
      placement:"top", 
      title:"Popover title", 
      trigger:'click' 
     }); 

     // Part 2: add click event listener 
     $(document).on("click", function(event){ 
      var target = $(event.target); 
      $.each($(".popover-toggle"), function(index, value){ 
       var _target = $(value); 
       // not click on the button and not click on the popover it self 
       if(!target.is(_target) && target.closest(".popover").length == 0){ 
        _target.popover("hide"); 
       } 
      }); 
     }); 

Не лучшая практика, но она прекрасно работает как на Chrome и FF.

Answer 5

Будучи очень упрощенно:

$('.popover').remove();