javascript - 表单元素已禁用 : Contain Form within a bootstrap popover embedded in Modal

Question

基于this post我尝试创建一个带有输入字段的弹出窗口，可以通过模式中的链接打开该输入字段。

但由于某种原因，输入和提交按钮被禁用。有谁知道为什么以及如何解决它？

Demo

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    <a href="#" id="popover">the popover link</a>
    <div id='popover-head' class='front hide'>
      Lorem Ipsum
    </div>
    <div id='popover-content' class='content hide'>
         <div class='form-group'>
                <input type='text' class='form-control' placeholder='Type something…'>
         </div>
         <button type='submit' class='btn btn-default'>Submit</button>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>
</div>

JS

$('#popover').popover({ 
html : true,
placement: 'bottom',
title: function() {
  return $("#popover-head").html();
},
content: function() {
  return $("#popover-content").html();
}
});

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Answer 1

您需要将弹出窗口的元素放置在模式弹出窗口中。因此必须使用弹出窗口的“容器”属性。

但是如果你使用 Bootstrap 3.0 那么你不需要做任何事情。

Fiddle with bootstrap3.0

使用了相同的代码。

$('#popover').popover({ 
    html : true,
    placement: 'bottom',
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});