【问题标题】:I can't click button in Bootstrap popover我无法单击 Bootstrap 弹出窗口中的按钮
【发布时间】:2014-12-12 15:23:50
【问题描述】:

我的引导弹出窗口有问题。我有一个按钮,当我点击它时,它会显示一个表单。在一个表单中有一个按钮,我想当我点击它时,它会提醒一些东西。但是当我点击它时,它不会提醒任何东西。我不知道为什么它不起作用,你能帮我吗?谢谢大家!

<script src="//code.jquery.com/jquery.js"></script>
	<!-- Latest compiled and minified CSS & JS -->
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function() {
		  $('#form_popover #ok').click(function(){
		  		alert("hi");
		  });
		  $('.btn-open-popover').popover();

		  // //popover option
		  $("#a-popover").popover({
		    title: 'Dang ki thong tin',
		    content: $('#divContentHTML').html(),
		    placement: 'right',
		    html: true
		  }); 
		});
	</script>
&lt;link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
	<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
		<a href="#" class="btn btn-default" id="a-popover">Click!</a>
        <div id="divContentHTML" style="display:none">
         <form method="post" id="form_popover">
          	<div class="form-group form-inline kc">
          		<label for="">Name</label>
          		<input type="text" class="form-control" id="user" placeholder="Input field">
          		<label for="">Email</label>
          		<input type="text" class="form-control" id="email" placeholder="Input field">
          	</div>
          	<button type="button" id="ok" class="btn btn-primary">OK</button>
          </form>
        </div>
	</div>

【问题讨论】:

    标签: jquery twitter-bootstrap popover bootstrap-popover


    【解决方案1】:

    由于此按钮是动态加载(或重新初始化)的,因此您应该使用委托事件处理程序。例如:

    $(document).on('click', '#ok', function()
    {
        alert("hi");
    });
    

    Fiddle.

    或者使用静态&lt;div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"&gt; 更好一点:

    $('.col-xs-5').on('click', '#ok', function()
    {
        alert("hi");
    });
    

    Fiddle.

    【讨论】:

      【解决方案2】:

      您可以将事件委托用于动态生成的元素

        $(document).on('click', '#ok',function(){
                  alert("hi");
       });
      

      Demo

      【讨论】:

        猜你喜欢
        • 2013-05-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-05-19
        • 2017-03-20
        • 2020-02-26
        相关资源
        最近更新 更多