Trigger Bootstrap JS behavior for dynamically loaded HTML content

Question

I am dynamically loading HTML templates containing Bootstrap markup. However, none of the Bootstrap Javascript behavior is being applied to the loaded content. For example, if the loaded content contained markup for the Bootstrap modal the modal doesn't behave correctly.

Is there a way I can trigger Bootstrap to refresh or apply it's Javascript to the newly loaded content?

Answer 1

you'll need to initialize the modal in the callback of whatever function/request object is loading the dynamic content

it's hard to say without seeing your code but something like this

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

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

Edit:

Bootstrap defines its javascript plugins individually. There is no global bootstrap object

Here's the plugin definition for tooltip

  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);

Thus the only thing you get access to via $('#myID').tooltip is the constructor and initializer

the best you can do without modifying the bootstrap code

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