在 Bootstrap 弹出框内执行 JS答案

【问题标题】：Execute JS inside of a Bootstrap popover在 Bootstrap 弹出框内执行 JS
【发布时间】：2016-04-04 17:31:06
【问题描述】：

我正在尝试将表单放置在引导程序中，所有的 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()

【问题讨论】：

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

【解决方案1】：

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

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 中使用class hidden

【讨论】：

谢谢胡安，真的很有帮助。

【解决方案2】：

在引导文档中：

sanitize：启用或禁用清理。如果激活“模板”，“内容”和“标题”选项将被清理。

这意味着所有的javascript都将被删除。

在 bootstrap.js > 函数 setElementContent(...

   if (this.config.html) {
    if (this.config.sanitize) {
      content = sanitizeHtml(content, this.config.whiteList, this.config.sanitizeFn);
    }

    $element.html(content);
  } else {
    $element.text(content);
  }

默认值为真，因此：

            $(SomeNodeElement).popover({
            html: true,
            sanitize: false,
            content: someElem.innerHMTL //or whatever
        })

【讨论】：