Прикрепите обработчик событий к кнопке в twitter bootstrap popover

Ответ 1

У меня была та же проблема, и в моем случае обходной путь $(body).on('click') не будет работать, так как приложение имеет кнопки щелчка мыши.

Вместо этого я сделал следующее. Таким образом, мы можем ограничить область действия делегирования только родительским элементом элемента popover.

$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
}).parent().delegate('button#close-me', 'click', function() {
    console.log('World!');
});

JS Fiddle: http://jsfiddle.net/dashk/5Yz7z/

P.S. Я использовал эту технику в пределах Backbone.View в своем приложении. Вот фрагмент кода в Fiddle, если вы используете его в Backbone.js, а также...: http://jsfiddle.net/dashk/PA6wY/ p >

EDITED В Bootstrap 2.3 вы можете указать целевой контейнер, в который будет добавлен popover. Теперь вместо выполнения локатора .parent() вы также можете прослушивать события специально для контейнера... Это может сделать слушателя еще более конкретным (представьте, что вы создаете DIV, который существует только для того, чтобы содержать popover.)

Ответ 2

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

$('body').on('click', '.popover button', function () {
    // code here
});

Ответ 3

Чтобы немного обновить DashK очень хороший ответ:.delegate() был заменен на .on() как на jQuery 1.7 (см. здесь).

$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
}).parent().on('click', 'button#close-me', function() {
    console.log('World!');
});

См. jsfiddle здесь: http://jsfiddle.net/smingers/nCKxs/2/

У меня также были некоторые проблемы с привязкой метода .on() к $('a.foo'); если у вас возникла такая проблема, попробуйте добавить его в документ, тело или html, например:

$('a.foo').popover({
    html: true,
    title: 'Hello',
    placement: 'bottom',
    content: '<button id="close-me">Close Me!</button>'
});

$('body').on('click', 'button#close-me', function() {
    console.log('World!');
});

Ответ 4

Очень простое решение, которое сработало для меня:

// suppose that popover is defined in HTML
$('a.foo').popover(); 

// when popover content is shown
$('a.foo').on('shown.bs.popover', function() {
    // set what happens when user clicks on the button
    $("#my-button").on('click', function(){
        alert("clicked!!!");
    });
});

// when popover content is hidden
$('a.foo').on('hidden.bs.popover', function(){
    // clear listeners
    $("#my-button").off('click');
});

Почему это работает: В основном popover контент не имеет прослушивателя, пока не откроется popover.

Когда отображается popover, bootstrap запускает свое событие shown.bs.popover. Мы можем привязать обработчик события к этому событию к $(a.foo) с помощью метода jQuery on. Поэтому, когда отображается popover, вызывается функция обработчика (обратного вызова). В этом обратном вызове мы можем прикреплять обработчики событий к содержимому popover - например: что происходит, когда пользователь нажимает эту кнопку внутри popover.

После закрытия popover рекомендуется удалить все прикрепленные обработчики для содержимого popover. Это делается с помощью обработчика hidden.bs.popover, который удаляет обработчики с помощью метода jQuery .off. Это предотвращает вызовы обработчиков событий внутри popover дважды (и более), когда popover снова открывается...

Ответ 5

У вас могут возникнуть проблемы, если вы добавите более сложную структуру в popover-контент, например внешний компонент. Для этого случая это должно сделать трюк.

var content = $('<button>Bingo?</button>');
content.on('click', function() {
    alert('Bingo!')
});

$('a.foo').popover({
    html: true,
    content: content
}).on('hidden.bs.popover', function() {
    content.detach(); # this will remove content nicely before the popover removes it
});

Ответ 6

попробуйте это

var content = function() {
    var button = $($.parseHTML("<button id='foo'>bar</button>"));
    button.on('click', '#foo', function() {
        console.log('you clicked me!');
    } );
    return button;
};

$( '#new_link' ).popover({
    "html": true,
    "content": content,
});

Ответ 7

$('.btn-popover').parent().delegate('button#close-me','click', function(){
  alert('Hello');
});

Если атрибуты данных заданы в static html, этот метод работает отлично. Спасибо:)