javascript - bootstrap的popover动态元素绑定问题

问题描述

问 题

使用的bootstrap的popover时，元素是通过ajax向服务器请求返回的，但是这个动态生成的元素无法绑定popover的初始化函数popover()。不知道这个怎么才能正常绑定进行初始化。
尝试通过点击元素时，调用popover('toggle')。但是这样需要点击两下才可以正常显示内容。但是如果在调用popover('toggle')前面加上popover()，可以正常显示，但是这样每次点击都会调用popover()进行初始化。

解决方案

應該要在請求返回並放入 Body 時進行綁定

$(function () {

  // $('[data-toggle="popover"]').popover()
  
  fakeDom(function(dom) {
    $dom = $(dom)
    // 這裡就應該預先初始化了
    $dom.popover()
    $('body').append($dom)
  })
  
})

function fakeDom(callback) {

    setTimeout(function() {
        callback && callback('<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Tooltip">異步載入</button>')
    }, 1000)

}

jsFiddle

这篇关于javascript - bootstrap的popover动态元素绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！