bootstrap 使用 jquery 弹出按钮单击事件不起作用

Question

我使用 bootstrap 弹出框的代码如下，

<a href="javascript:void(0);" class="btn btn-primary btn-sm" rel="popover"  data-placement="top"
                        data-original-title="<i class='fa fa-fw fa-users'></i> Enter New Investor Group"
                        data-content="<div class='smart-form'><div class='col-sm-10'><label class='input'><input type='text' name='NewInvestor' placeholder='Investor Group Name' id='NewInvestor' /></label></div><div class='col-sm-2'><button id='btntest' class='btn btn-primary btn-sm assignedGroup' type='button' data-target-id='NewInvestor' >ADD</button></div></div><div class='clearfix'></div><br/>"
                        data-html="true">Add</a>

我想在 jquery 中点击按钮时触发事件。代码如下，

$("#btntest").click(function () {
        alert("You click on button");
    });

JSFiddle

我的代码不起作用的原因是什么？

非常感谢您的帮助。

Answer 1

再次检查Bootstrap documentation on popovers：

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
    Click to toggle popover
</button>

在你的 JS 中：

$(function () {
    $('[data-toggle="popover"]').popover()
})

Answer 2

假设您的代码正确呈现，请尝试以下代码。

$(function(){
   $(document).on('click',"#btntest",function () {
      alert("test button clicked");
   });
});

已编辑

看看我的 JsFiddle，看看它是否有效 http://jsfiddle.net/jb5fexp3/

Answer 3

$(document).on("click", "#btntest", function () {
 // your code`enter code here`
})`;`

将在 #btntest 元素上绑定事件，这些元素在使用 ajax html 数据集绑定事件示例时不存在。

bootstrap 使用 jquery 弹出按钮单击事件不起作用

bootstrap popover button click event does not working using jquery

jquery

popover

twitter-bootstrap

twitter-bootstrap-3

bootstrap-popover