CODEWITHSUNDEEP
javascripthtmladdeventlistener
computerengineer
computerengineer

Reputation: 149

Add Event Listener of Dynamically created web Element

I am writing a chrome extentions whihc determines the clicked elements xpath dynamically. It creates a text area web element with insertAdjacentHTML function (like following) and the clicked elements xpath is placed to it. 

    document.body.insertAdjacentHTML('beforeend',this.html);
    //this.html is string version of text area web element

    document.addEventListener('click', this.getData, true);

The above code gets the xpath of the element and places it to the created text area. I also want to calculate and show the number of elements that matched with the xpath in the text area(user can edit the text area) To do that I am trying to add another eventlistener for the text area element which is like following:

 var element= document.getElementById("inspector-text-area")
          element.addEventListener('change',function(e){
            console.log("event fired")
            ...
         });

after running the extention, the xpath of the clicked element is placed to created text area web element but when I edit the text area the next added event listener's function is not fired. What is wrong I do? Thanks..

Upvotes: 0

Views: 386

Answers (1)

Latif Uluman
Latif Uluman

Reputation: 255

It is related with the event capturing and event bubbling

Upvotes: 1

Related Questions