Bootstrap弹出不起作用

Question

我的弹出窗口弹出不显示。

这里是我的HTML：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div align='left' id='person'>Person</div> 

<div id="popoverEditPerson" class="hide"> 
    <form> 
     <h4>Enter Name:</h4> 
     <input id='nameInput' type='text' placeholder='Name'/> 
    </form> 
</div> 

这里是我的JavaScript：

$(function(){ 
    $('#person').popover({ 
     html: true, 
     title: 'Edit Person<a class="close" href="#");">&times;</a>', 
     content: $('#popoverEditPerson').html(), 
     placement: 'auto' 
    }); 
}); 

没有人有任何想法我可能是做错了什么？

Answer 1

我会做的是设置类=“隐藏”不上pop​​overEditPerson div的本身，而是它周围，像这样：

<div class="hide"> 
    <div id="popoverEditPerson"> 
     <form> 
      <h4>Enter Name:</h4> 
      <input id='nameInput' type='text' placeholder='Name'/> 
     </form> 
    </div> 

https://jsfiddle.net/ue1kss3v/1/

如果我点击的人，它按预期工作