Bootstrap Popover，.click不会捕捉popover内的按钮 [英] Bootstrap Popover, .click not catching button inside 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'）。点击（function（）{
 alert（'it works！'）; 
}）; 
 
}）; 
  

HTML：

 < button class =btn btn-primary demo_button>点击此处< / button> 
 
< div id =popover_template> 
< button class =btn click_me>制作警报< / button> 
< / div> 
  

解决方案

.click（）仅适用于（）

  $（document）.on（click，.click_me， function（）{
 alert（'it works！'）; 
}）; 
  

First off, a fiddle of the problem: jsfiddle.net

I am using a popover, and it's content is html, a button with class "click_me". I have jquery to listen for a click on "click_me" and it should throw an alert. However, it doesn't. Am I missing something?

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>

解决方案

.click() will only work for elements that are present on load you need to use on()

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

这篇关于Bootstrap Popover，.click不会捕捉popover内的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！