表单和输入未显示在引导程序弹出窗口中

Question

我想在 Bootstrap 弹出窗口中创建一个表单。弹出窗口显示所有元素，但当我使用form标签或等时input，button它不会显示任何内容。

\n\n

\r\n

\r\n

var options = {\r\n  content: function() {\r\n    return $("#message_popover_content").html();\r\n  },\r\n  html: true,\r\n  container: "body",\r\n  placement: \'bottom\',\r\n};\r\n\r\n$(\'#message_popover\').popover(options);

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>\r\n<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">\r\n<a href="javascript:void(0)" id="message_popover" class="sm-btn-success border-default mt-2 ml-4" rel="popover">Envoyer une autre version</a>\r\n<div id="message_popover_content" class="d-none">\r\n  <div class="popover-cart">\r\n    <div class="popover-head">\r\n      <h3 class="s-m-title">Envoyer une nouvelle version de l\xe2\x80\x99EVP (juillet 19)</h3>\r\n    </div>\r\n    <div class="popover-body">\r\n      <div class="send-msg-form add-formation-modal">\r\n        <form action="javascript:void(0)">\r\n          <div class="form-group">\r\n            <textarea class="form-control" name="message" rows="3"></textarea>\r\n          </div>\r\n          <div class="form-group">\r\n            <label for="etablissementLogo" class="file-etablissement-logo-label"> <img src="images/bo/icons/attatch.svg" alt="> Joindre un fichier</label>\r\n            <input type="file" class="form-control-file" name="file" id="etablissementLogo">\r\n          </div>\r\n          <div class="add-formation-actions">\r\n            <input type="submit" class="btn btn-update" value="Envoyer l\xe2\x80\x99EVP">\r\n            <button type="button" class="btn btn-cancel" data-dismiss="modal">Annuler</button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

为此，您需要返回要在内容中设置的 jQuery 对象，而不是 HTML 字符串：

\n\n

\r\n

\r\n

var options = {\r\n  title: () => $("#message_popover_content .popover-head h3"),\r\n  content: () => $("#message_popover_content .add-formation-modal form"),\r\n  html: true,\r\n  placement: \'bottom\'\r\n};\r\n\r\n$(\'#message_popover\').popover(options);

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\r\n<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>\r\n<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">\r\n<a href="javascript:void(0)" id="message_popover" class="sm-btn-success border-default mt-2 ml-4" rel="popover">Envoyer une autre version</a>\r\n<div id="message_popover_content" class="d-none">\r\n  <div class="popover-cart">\r\n    <div class="popover-head">\r\n      <h3 class="s-m-title">Envoyer une nouvelle version de l\xe2\x80\x99EVP (juillet 19)</h3>\r\n    </div>\r\n    <div class="popover-body">\r\n      <div class="send-msg-form add-formation-modal">\r\n        <form>\r\n          <div class="form-group">\r\n            <textarea class="form-control" name="message" rows="3"></textarea>\r\n          </div>\r\n          <div class="form-group">\r\n            <label for="etablissementLogo" class="file-etablissement-logo-label"> <img src="images/bo/icons/attatch.svg" alt=""> Joindre un fichier</label>\r\n            <input type="file" class="form-control-file" name="file" id="etablissementLogo">\r\n          </div>\r\n          <div class="add-formation-actions">\r\n            <input type="submit" class="btn btn-update" value="Envoyer l\xe2\x80\x99EVP">\r\n            <button type="button" class="btn btn-cancel" data-dismiss="modal">Annuler</button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n