小编bre*_*c79的帖子

我正在使用Twitter的Bootstrap js中的popover功能.我有一个按钮,当单击时,执行此javascript:

$("#popover_anchor").popover({trigger: "manual",
                              placement: "below",
                              offset: 10,
                              html: true,
                              title: function(){return "TITLE";},
                              content: function(){return "CONTENT TEXT";}});
$("#popover_anchor").popover("show");

除了标题和内容函数返回不同的文本之外,还有另一个按钮执行基本相同的javascript.

请注意,它们都在同一元素上定义弹出窗口,只是具有不同的内容.

问题是,一旦点击任一按钮并执行js,其他按钮的后续点击将不会改变弹出窗口内容.因此,一旦弹出了popover,我该如何更新/更改内容？

给出这个HTML:

<div id="admin_login">
  <form>
    <input type="text"/>
    <input type="text"/>
  </form>
  <a href="#">Login</a>
</div>

这个css:

#admin_login form {
  background: #464950;
  padding: 5px;
  box-shadow: #000 2px 2px 10px;
  border-bottom-right-radius: 10px;
  margin-bottom:3px;
}

#admin_login input {
  display: block;
  border: none;
  margin: 6px 4px;
  padding: 4px;
}

#admin_login a {
  color: inherit;
  background: #464950;
  padding: 4px 8px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: #000 2px 2px 10px;
  text-decoration: none;
}

我明白了:

如何使锚标记和表单显示为一个元素,而不是相互重叠？

UPDATE

@TristarWebDesign的解决方案完美无缺: