如何将Bootstrap工具提示应用于ajax加载的内容



我在ready()上调用以下函数。这可以预见地为我的页面上在ready()时存在的元素显示Bootstrap工具提示,但不显示ajax加载的元素。我现在需要有工具提示工作在ajax加载的内容以及。我该如何重写它以允许新的ajax加载元素具有适当的行为?

$(document).ready( function() { 
  give_bootstrap_tooltip_behavior_to_all_elements_with_tooltip_attribute();
});
function give_bootstrap_tooltip_behavior_to_all_elements_with_tooltip_attribute() { 
  $( "[data-toggle='tooltip']" ).each(function(k,el){
    defaults = {
      delay: { show: 2000, hide: 0},
      container: 'body' /* needed because otherwise tooltips sometimes go within elems that have overflow hidden */
    }
    inline_vals = {
      delay: $(el).data('delay') 
    }
    $(el).tooltip($.extend(defaults, inline_vals));
  }); 
}

我是否需要在每个ajax成功方法中调用这个?

完成ajax请求时必须调用:

$.ajax({
    url: '//url',
})
.done(function(data) {
    $('#page').html(data);
    give_bootstrap_tooltip_behavior_to_all_elements_with_tooltip_attribute();
})
...

最新更新