Javascript method wont work with dynamic elements

Question

Okay so if this was to do with a click event i would know to do something like ...

$('body').on('click','.element',function(){
     ....do something
});

But the code i have here is:

$('.checkout .popbtn').popover({
    trigger: 'manual',
    html: true,
    container: 'body',
    placement: 'bottom',
    animation: false,
    content: function(){
        return $('#popover').html();
    }
});

.popbtn is the dynamically generated element.

How can i get around this?

Thanks

Probably you can attach the event after you populate the element or the element is generated. Little more code or a sample fiddle will be helpful — Vatsal, Feb 09 '16 at 15:46
This stackoverflow answer has a few options: http://stackoverflow.com/questions/16990573/how-to-bind-bootstrap-popover-on-dynamic-elements — ZzCalvinzZ, Feb 09 '16 at 15:48

score 0 · Answer 1 · answered Feb 09 '16 at 15:49

0

When your button gets added to the page, call your code.

answered Feb 09 '16 at 15:49

adrian3martin

101
6

score 0 · Answer 2 · answered Feb 09 '16 at 15:52

Use DOMNodeInserted to get when the element is created on the page

$('body').on('DOMNodeInserted', '.popbtn', function () { $('.checkout .popbtn').popover({ trigger: 'manual', html: true, container: 'body', placement: 'bottom', animation: false, content: function(){ return $('#popover').html(); } }); });

Javascript method wont work with dynamic elements

2 Answers2