如何将对象附加到 JQuery 中动态添加的元素

Question

I'm using Bootstrap 4 popover like so:

$('[data-toggle="popover"]').popover({
    trigger: 'hover'
});

But now in jquery, I'm dynamically adding an element.

var leaveUser = $('.popover').clone().prependTo('.new-popups');

But the .popover() is not taking affect for this new dynamicly added element. How do I get it to work?

Answer 1

The following:

$('[data-toggle="popover"]').popover({
    trigger: 'hover'
});

Will only match elements that are currently in the DOM, which your clone is not.

You will need to either use this selection and method after cloning, or call the method explicitely on your new element after cloning it:

var leaveUser = $('.popover')
    .clone()
    .prependTo('.new-popups')
    .popover({
        trigger: 'hover'
    });