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

Question

Во-первых, скрипку проблемы: jsfiddle.net

Я использую поповер, и это содержание 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> 

Answer 1

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

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

Answer 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.

Answer 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 готов, кнопку он еще не создан ты, делая это, каждый раз поповер поднимается вы будете обрабатывать событие на вашей созданной кнопке.

Answer 4

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

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