Adding a click listener to a dynamic button

Question

I am making a page that will list rows as entries are made with a remove button associated with each row. I can make the rows and include the button, but I can't seem to get .addEventListener() to bind to that button.

I've got an array that I'm looping through to populate my <div> (named "hospital"). I'm adding a _button and _span to a _row and that _row is then appended to hospital.

family.forEach(function(_member, cnt) {
    var _row = document.createElement('li');

    var _button = document.createElement("button");
    _button.id = "remove_item_" + cnt;
    var _button_text = document.createTextNode("Remove");
    _button.appendChild(_button_text);
    _row.appendChild(_button);

    var _span = document.createElement("span");
    _span.innerHTML = 'Age: ' + _member.age + ' / Relationship: ' + _member.rel + ' / Smoker? ' + _member.smoker;
    _row.appendChild(_span);

    hospital.appendChild(_row);
    document.querySelector("#remove_item_" + cnt).addEventListener('click', function() {
        console.log('Clicked remove');
    }, false);
});

I read somewhere that the button had to exist before I could bind the event listener to it (and I thought I did with this code) but I'm still not able to do that. Am I at least close to doing this?

NOTE: I know I can do this with jQuery - I was asked to do this in pure JS.

yes, but is it in the DOM already or is it created in memory like the _row etc. — Gabriele Petrioli
– Gabriele Petrioli, Commented Sep 24, 2017 at 18:51

Gabriele Petrioli · Accepted Answer · 2017-09-24 18:52:23Z

2

You could bind the handler before inserting the element in the DOM.

So just bind the handler to the _button before the appendChild (or after, it doesn't really matter. the reference is still valid)

family.forEach(function(_member, cnt) {
    var _row = document.createElement('li');

    var _button = document.createElement("button");
    _button.id = "remove_item_" + cnt;
    var _button_text = document.createTextNode("Remove");
    _button.appendChild(_button_text);
    _row.appendChild(_button);

    var _span = document.createElement("span");
    _span.innerHTML = 'Age: ' + _member.age + ' / Relationship: ' + _member.rel + ' / Smoker? ' + _member.smoker;
    _row.appendChild(_span);

    _button.addEventListener('click', function() { console.log('Clicked remove'); }, false);

    hospital.appendChild(_row);
});

edited Sep 24, 2017 at 18:52

answered Sep 24, 2017 at 18:19

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Comments

Maciej Kwas · Accepted Answer · 2017-09-24 18:20:44Z

There might be some problem with javascript interpreter that is caching things and thus there is still no DOM node reference even though you previously asked to create one. You can however bind handler directly to button element just when you create it:

family.forEach(function(_member, cnt) {
    var _row = document.createElement('li');

    var _button = document.createElement("button");
    _button.id = "remove_item_" + cnt;
    var _button_text = document.createTextNode("Remove");
    _button.appendChild(_button_text);
    _button.addEventListener('click', function() { console.log('Clicked remove'); }, false);
    _row.appendChild(_button);

    var _span = document.createElement("span");
    _span.innerHTML = 'Age: ' + _member.age + ' / Relationship: ' + _member.rel + ' / Smoker? ' + _member.smoker;
    _row.appendChild(_span);

    hospital.appendChild(_row);

});

Collectives™ on Stack Overflow

Adding a click listener to a dynamic button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related