javascript - 在 Bootstrap 弹出窗口内执行 JS

标签 javascript jquery html twitter-bootstrap twitter-bootstrap-3

我试图将表单放置在 Bootstrap 内部,所有 html 渲染到其中都很好,但不执行任何 JavaScript(日期选择器)。

这是html代码:

<button type="button" class="btn btn-lg btn-danger" data-html='true' data-toggle="popover" title="Popover title" data-content='

Html Form code

'>Click to toggle popover</button>

JS:

  $('[data-toggle="popover"]').popover()

最佳答案

我建议在属性中使用选择器

html:

<button type="button" class="btn btn-lg btn-danger" data-popover-content="#mypop" data-toggle="popover" data-trigger="focus">Popover Example</button>

<div class="hidden" id="mypop">
  <div class="popover-heading">
    This is the heading
  </div>
  <div class="popover-body">
    This is the body
  </div>
</div>

js:

$("[data-toggle=popover]").popover({
   html : true,
   content: function() {
      var content = $(this).attr("data-popover-content");
      setTimeout(function(){ console.log('execute'); },500);
      return $(content).children(".popover-body").html();
   },
   title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
   }
});

链接演示:https://jsfiddle.net/xz45cnt4/

在 id mypop 中使用隐藏类

关于javascript - 在 Bootstrap 弹出窗口内执行 JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36409144/

相关文章:

jquery - 如何返回被点击的元素

html - CSS:Flex 等高列和垂直居中内容

javascript - 出现多个字段时的 jquery 时间输入问题

javascript - 使用 jquery 或 javascript 自动完成

javascript - Javascript 中的单例和原型(prototype)设计

html - 当正文设置为 `overflow: hidden` 时启用子项滚动?

html - 在保持文档流的同时将一个 HTML 元素移动到另一个元素之前

javascript - 如果我想添加更多代码,js将无法工作

javascript - 打字时向数字添加逗号

javascript - HTML 页面中的多滚动错误