javascript - AddEventListener not fireing dynamically created element -

for current project i'm injecting javascript webpage in form of safari plugin.

everything working fine , process follows:

• intialize seperate objects
• load page
• parse page injecting dom elements when needed
• have interval of 1000ms re-parse live-updates

now works fine, inject element buttons , working fine.

now page has javascript itself, has auto-update function.(live-updates) once every second there poll server fetch new elements inject.

so new elements added live-update script.

now pageparser injects button elements in new element created live-update script.

the buttons shown etcetera, there problem click eventlistener. it's not fireing.

here part of code:

class viewmanager {     constructor() {         this.databasemanager = databasemanager;          this.injectaddons(this);         setinterval(this.injectaddons, 1000, this);     }      injectaddons(self) {         var karmabuttonimage = new image('../img/karma.jpg');          var post_elements = document.getelementsbyclassname('post userid');          for(var i=0; i<post_elements.length; i++) {             self.createkarmabutton(post_elements[i], self);         }     }      static changebackgroundbykarma(element, karma) {         var total_karma = karma.karma_up + karma.karma_down;         if(total_karma > 0) {             var karma_up_percentage = (karma.karma_up * 100) / total_karma;             if(isnan(karma_up_percentage)) {                 karma_up_percentage = 0;             }              if(karma_up_percentage < 50) {                 var normalized = (50 - karma_up_percentage) * 2;                 var a_value = parsefloat(normalized/100);                 element.style.backgroundcolor = 'rgba(255, 0, 0, ' + a_value + ')';             } else {                 var normalized = (karma_up_percentage - 50) * 2;                 var a_value = parsefloat(normalized/100);                 element.style.backgroundcolor = 'rgba(0, 255, 0, ' + a_value + ')';             }         }     }      createkarmabutton(element, self) {         var user_id = element.getattribute('data-user');         var post_id = element.getattribute('data-postid');          var post_space = element.getelementsbyclassname('postholder_bot');          var target = post_space[0];          var fok_es_container = target.getelementsbyclassname('fok_es_container');          if(fok_es_container.length === 0) {             var enhanced_div = document.createelement('div');                 enhanced_div.classname = "fok_es_container";                 enhanced_div.position = 'absolute';                 enhanced_div.style.width = '180px';                 enhanced_div.style.height = '100px';                 enhanced_div.style.cssfloat = "left";              target.insertbefore(enhanced_div, target.firstchild);              var injectkarmabuttons = function(haskarma) {                 if(!haskarma) {                     var karma_collector = document.createelement('div');                      var karma_up_button = document.createelement('div');                     karma_up_button.position = 'absolute';                     karma_up_button.style.width = '25px';                     karma_up_button.style.height = '25px';                     karma_up_button.style.background = "green";                     karma_up_button.style.border = "1px solid #000";                      var karma_down_button = document.createelement('div');                     karma_down_button.position = 'absolute';                     karma_down_button.style.width = '25px';                     karma_down_button.style.height = '25px';                     karma_down_button.style.background = "red";                     karma_down_button.style.border = "1px solid #000";                      karma_collector.appendchild(karma_up_button);                     karma_collector.appendchild(karma_down_button);                      karma_up_button.addeventlistener("click", self.karmabuttonuppressed);                     karma_down_button.addeventlistener("click", self.karmabuttondownpressed);                      enhanced_div.appendchild(karma_collector);                 }             };              databasemanager.getkarma(user_id, function(karma) {                 viewmanager.changebackgroundbykarma(enhanced_div, karma);             });             databasemanager.haskarma(post_id, injectkarmabuttons);         }     }      karmabuttonuppressed(e) {         var user_id = viewmanager.getuserid(e);         var post_id = viewmanager.getpostid(e);          var enhanced_div = e.target.parentnode.parentnode;          viewmanager.removeelementafterclick(e);          databasemanager.addkarmaup(user_id, post_id, function(karma) {             viewmanager.changebackgroundbykarma(enhanced_div, karma);         });     }      karmabuttondownpressed(e) {         var user_id = viewmanager.getuserid(e);         var post_id = viewmanager.getpostid(e);          var enhanced_div = e.target.parentnode.parentnode;          viewmanager.removeelementafterclick(e);          databasemanager.addkarmadown(user_id, post_id, function(karma) {             viewmanager.changebackgroundbykarma(enhanced_div, karma);         });     }      static getuserid(e) {         return e.target.parentnode.parentnode.parentnode.parentnode.getattribute('data-user');     }      static getpostid(e) {         return e.target.parentnode.parentnode.parentnode.parentnode.getattribute('data-postid');;     }      static removeelementafterclick(e) {         var target = e.target.parentnode;          e.target.parentnode.remove(target);     } } 

so i'm guessing problem is. dom needs refresh? because live-updates come domain (the original domain) , extension runs on localhost.

is there encountered problem before?

edit: self variable reference instance of viewmanager class, it's defined , functioning. functions karmabuttonuppressed , karmabuttondownpressed available on object instance.