Bootstrap Popover,.click не ловить кнопку внутри popover

Во-первых, сценарий проблемы: jsfiddle.net

Я использую popover, и это содержимое html, кнопка с классом "click_me". У меня есть jquery, чтобы прослушать щелчок на "click_me", и он должен бросить предупреждение. Однако это не так. Я что-то пропустил?

JS:

jQuery(document).ready(function($) {

$('.demo_button').click(function () {
    $(this).popover({
                html: true,
                trigger: 'manual',
                placement: 'right',
                content: function () {
                    var $buttons = $('#popover_template').html();
                    return $buttons;
                }
    }).popover('toggle');
});

$('.click_me').click(function() {
    alert('it works!');
});

});

HTML:

<button class="btn btn-primary demo_button">Click here</button>

<div id="popover_template">
    <button class="btn click_me">Make Alert</button>
</div>

Ответы

Ответ 1

.click() будет работать только для элементов, которые присутствуют при загрузке, которую вы должны использовать на()

$(document).on("click", ".click_me", function() {
    alert('it works!');
});

Ответ 2

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

<div class="container"><br />
    <button class="btn btn-primary demo_button">Click here</button>

    <div id="popover_template">
        <button class="btn click_me">Make Alert</button>
    </div>
</div>

 $('.container').on("click", ".click_me", function() {
     alert('it works!');
 });

Также при этом не прикрепляйте его к родительскому элементу, который слишком высоко поднимает дерево. Вы хотите прикрепить его к ближайшему возможному родительскому элементу. Нам не нужно иметь событие click на чем-то вроде document, потому что это хорошая идея, чтобы быть конкретным, какие элементы получат это событие. Присоединение к document будет означать, что любой элемент, который имеет класс click_me, будет доступен для нажатия и ответа на один и тот же код. Если вы хотите иметь разную функциональность на разных кнопках, вы не можете, потому что все они отвечают на тот же код, который прикреплен к document.

Btw здесь fiddle.

Ответ 3

Вы должны попробовать следующее:

jQuery(document).ready(function($) {

    $('.demo_button').click(function () {
        $(this).popover({
                html: true,
                trigger: 'manual',
                placement: 'right',
                content: function () {
                    var $buttons = $('#popover_template').html();
                    return $buttons;
                }
         }).popover('toggle');
         $('.click_me').off('click').on('click', function() {
             alert('it works!');
         });
    });
});

Когда DOM готов, вы еще не создали кнопку, делая это, каждый раз, когда popover поднимается, вы будете обрабатывать событие на вашей созданной кнопке.

Ответ 4

Использование: show.bs.popover - это событие срабатывает сразу же после вызова метода show instance.

$('#myPopover').on('hidden.bs.popover', function () {
  // bind your button click event here
})