Как предотвратить поклоновую div для скрытия при нажатии внутри нее для твитер-бутстрапа «несбыточный popover» (data-trigger = «focus»)?

У меня есть неansible popover (data-trigger = “focus”) с текстовым полем внутри него. Но как только я нажимаю внутри текстового поля, чтобы ввести его, исчезает из-за «data-trigger =« focus ». Как заставить div разумно не исчезать при щелчке внутри него? Вот мой html:

   

Вот мой jquery:

  $(document).ready(function(){ $('.BookAppButton').click(function(event){ event.preventDefault(); console.log("Button Clicked.."); }); $('.BookAppButton').popover({ title : '', html : 'true', content:'

Enter name :

' }); });

Это моя ссылка jsfiddle: http://jsfiddle.net/3g3o4xhw/

Я нахожусь на своем конце ума .. пожалуйста, помогите .. Спасибо заранее.

Клики по popover скрывают этот popover, потому что они крадут фокус браузера. Как только кнопка теряет фокус, popover будет скрыт (потому что мы установили data-trigger="focus" ).

Чтобы задать точный вопрос, который вы задали:

запретить popover div для скрытия при щелчке внутри него для twitter bootstrap «disissible popover» (data-trigger = «focus»)?

Самый простой способ исправить это – предотвратить щелчки внутри popover от кражи фокуса:

  • Добавление прослушивателя событий для захвата кликов внутри popover
  • Вызов функции preventDefault() в событии preventDefault()

Это остановит фокус от кражи и, таким образом, перестанет закрываться.

Примечание. Нам нужно добавить прослушиватель событий в mousedown а не click , потому что именно тогда фокус задается браузером.

Более подробное объяснение того, почему мы используем mousedown и preventDefault() можно найти в этом ответе StackOverflow: запретить запуск фокусного события при нажатии на div

 $(function() { $('[data-toggle="popover"]').popover() }) $('body') .on('mousedown', '.popover', function(e) { console.log("clicked inside popover") e.preventDefault() }); 
       Dismissible popover    

Вы должны использовать tigger: 'click' .

 $('.BookAppButton').popover({ title : '', html : 'true', trigger: 'click', content:'

Enter name :

' }); });

Вместо

 data-trigger="focus" 

вы должны использовать

 data-trigger="'focus'" 

для AngularUI Bootstrap версии 2.0 и выше.