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.

Answer 1

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);
});

Answer 2

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);

});