Add Event Listener of Dynamically created web Element

Question

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..

It should be "change" not "onchange" element.addEventListener('change',function(e){ — Eldar
– Eldar, Commented Dec 7, 2019 at 15:29
@Eldar I have corrected it, but again it does not work. By the way I also tried event type click or hover. It does not work — computerengineer
– computerengineer, Commented Dec 7, 2019 at 15:45
The code you've posted looks correct. 2 things to check: 1. is inspector-text-area actually on the page when you call getElementById("inspector-text-area")? 2. When do you expect the event to fire? The change event only fires when the field value is updated, which usually happens when the field loses focus -- not as the user is typing. If you want to see changes as the user types consider using keyup event instead. — Chris Camaratta
– Chris Camaratta, Commented Dec 7, 2019 at 16:00
The problem is solved. When I removed the 3tr parementer of the document.addEventListener('click', this.getData, true); it worked. By the way @ChrisCamaratta the type of the event that I want is 'keyup' event. Thank for this information — computerengineer
– computerengineer, Commented Dec 7, 2019 at 16:17

Latif Uluman · Accepted Answer · 2019-12-11 11:17:20Z

1

It is related with the event capturing and event bubbling

answered Dec 11, 2019 at 11:17

Latif Uluman

2553 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add Event Listener of Dynamically created web Element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related