asked on

Multiple Javascript created buttons not working with AddEventListener

Hey guys,

So I am creating buttons within table cells.

When I have one button in the cell with an AddEventListener click event it works fine, but when I put in two buttons with click events the first button click event doesn't work, but the second one does. This happens for all the buttons when accompanied by a second button, but all buttons work fine when alone in the cell.

In the below example both the "Fix Share ACL" and "Create DFS" button will appear but the Event handler will only work for the "Create DFS" button.

var sTable = document.getElementsByClassName("InfoTable")[1];
var row1 = document.createElement('tr');

var actionCell = document.createElement('td');

var fixshareaclbtn = document.createElement('input');
fixshareaclbtn.type = "button";
fixshareaclbtn.id = "fixshareaclbtn-" + ID;
fixshareaclbtn.name = "fixshareaclbtn-" + ID;
fixshareaclbtn.value = "Fix Share ACL";
fixshareaclbtn.style.borderRadius = "25px";
fixshareaclbtn.addEventListener("click", LaunchfixshareaclWindow, false);

var fixshareaclhidden = document.createElement('input');
fixshareaclhidden.type = "hidden";
fixshareaclhidden.id = "fixshareaclhidden-" + ID;
fixshareaclhidden.value = ID + ";" + strAction;

if (actionCell.innerHTML != "")
    actionCell.innerHTML += "<br>";

actionCell.appendChild(fixshareaclhidden);
actionCell.appendChild(fixshareaclbtn);

var createdfsbtn = document.createElement('input');
createdfsbtn.type = "button";
createdfsbtn.id = "createdfsbtn-" + ID;
createdfsbtn.name = "createdfsbtn-" + ID;
createdfsbtn.value = "Create DFS Link";
createdfsbtn.style.borderRadius = "25px";
createdfsbtn.addEventListener("click", LaunchDFSLinkCreateWindow, false);

var createdfshidden = document.createElement('input');
createdfshidden.type = "hidden";
createdfshidden.id = "createdfshidden-" + ID;
createdfshidden.value = ID + ";" + strAction;

if (actionCell.innerHTML != "") {
    actionCell.innerHTML += "<br>";
}

actionCell.appendChild(createdfshidden);
actionCell.appendChild(createdfsbtn);

row1.appendChild(actionCell);

sTable.appendChild(row1);

Open in new window

Thoughts?

Thanks

Robert Schutt

I did a quick test and I think the code actionCell.innerHTML += "<br>"; is removing the link between the button and the event because it is taking the button out of the document and putting it back in (without the event).

Couple of possible solutions, using insertAdjacentHTML would be one but since you just insert a <br> element I would suggest to replace lines 20 and 39 by:

actionCell.appendChild(document.createElement("br"));

Open in new window

ASKER CERTIFIED SOLUTION

Robert Schutt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tim

ASKER

Fantastic, Thank you Robert.

I used this and it worked.

actionCell.insertAdjacentHTML('beforeend', "<br>");