为动态加载的 HTML 内容触发 Bootstrap JS 行为

Question

我正在动态加载包含 Bootstrap 标记的 HTML 模板。但是，Bootstrap Javascript 行为不会应用于加载的内容。例如，如果加载的内容包含 Bootstrap 模式的标记，则该模式将无法正确运行。

有没有办法可以触发 Bootstrap刷新或将其 Javascript应用到新加载的内容？

Answer 1

您需要在加载动态内容的任何函数/请求对象的回调中初始化模式

没有看到你的代码很难说，但是像这样

require(['!text/myDynamicTemplate.html'], function(template){
   //logic to render the template and/or insert it into the dom here

   $('#myModal').modal(options)
})

编辑：

Bootstrap 单独定义了它的 javascript 插件。没有全局引导对象

这是工具提示的插件定义

  function Plugin(option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.tooltip')
      var options = typeof option == 'object' && option

      if (!data && /destroy|hide/.test(option)) return
      if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.tooltip

  $.fn.tooltip             = Plugin
  $.fn.tooltip.Constructor = Tooltip


  // TOOLTIP NO CONFLICT
  // ===================

  $.fn.tooltip.noConflict = function () {
    $.fn.tooltip = old
    return this
  }

}(jQuery);

因此，您可以通过 $('#myID').tooltip 访问的唯一内容是构造函数和初始化程序

在不修改引导程序代码的情况下可以做到的最好的事情

$('[data-toggle=tooltip]').tooltip()