将popover绑定到动态内容的问题

Question

目前，我的网站由多个页面组成，这些页面是动态加载的。在某些页面上有一些我希望有弹出窗口的按钮。我在弹出窗口和动态内容上阅读了一些文档和stackoverflow答案。但是，我似乎无法让它发挥作用。您可以在下面找到我的代码：

的Javascript

$(document).ready(function(){
    var popOverSettings = {
        trigger: "click",
        placement: 'bottom',
        container: 'body',
        html: true,
        //content:" <div style='color:red'>This is your div content</div>"
        content: function () {
            return $('#popover-content').html();
        }

    };
    $('div').on('DOMNodeInserted', function () {
        $(".pop-function").popover(popOverSettings).click(function(e) {
            e.preventDefault();
        });
    //$(event.target).find('button[rel=popover]').popover(popOverSettings);
    });
    try {
        $("button[rel=popover]").popover(popOverSettings).click(function(e) {
            e.preventDefault();
        });
    } catch (err) {}
});

HTML按钮

<button class="pop-function" rel="popover">Button</button>