2

I have a problem with bootstrap popover.I have a button, when i click in this, it show a form. In a form have a button,I want when I click this, it alert something. But when I click it, it not alert something. I don't know why it not working, can you help me? Thanks you everybody! 

<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>
<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <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>
cvrebert
  • 9,075
  • 2
  • 38
  • 49
Jenny Tran
  • 33
  • 1
  • 6

2 Answers2

5

Since this button is loaded (or reinitialized) dynamically, you should use delegated event handler. For example:

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

Fiddle.

Or a little better with static <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">:

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

Fiddle.

Regent
  • 5,142
  • 3
  • 21
  • 35
0

you can use event delegate for dynamic generated elemnts

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

Demo

Umesh Sehta
  • 10,555
  • 5
  • 39
  • 68