Eventlistener on dynamically generated Selectbox, Best practice

Hi,

I need to add an event listener on a dynamically created checkbox.

How to build an event listener for an event which not exist yet?
(I don’ t want to overwhelm visitors with a bunch of selectbox. They sould appear selection after selection)

I have a selectbox.
The HTML:

<div id="selectbox">
        <select class="selectstyled" id="**change**">
        <option value="0">Which issue?</option>
        <option value="1">Issue 1</option>
        <option value="2">Issue 2</option>
        <option value="3">Issue 3</option>
        <option value="4">Issue 4</option>
        </select>
    </div>

Depending on the selected Issue a second selectbox appears through JS.

let issue = document.getElementById("change");
document.getElementById("change").addEventListener("change", function(value) {
    if (issue.value == 1) {
        document.getElementById("selectbox").insertAdjacentHTML("afterend", `
        <div id = "selectbox">
        <select class = "selectstyled"
        id = "**changeNewIssueClusterDependingOnChange**">
        <option value="0">**And here is the 2nd issue depending on issue 1**</option>
        <option value="1">Issue with x </option>
        <option value="2">Issue with y</option>
        <option value="3">Issue with z </option>
        </select>
        </div>
    `)
    }
    if (issue.value == 2) {
    `)
    }
});

When the second selectbox has been triggered through the “change” event on first selectbox I don’t know, how to create a change event.

The only idea I had was:

let issue2 = document.getElementById("**changeNewIssueClusterDependingOnChange**l");

When I console log issue2 I get:
TypeError: issue2 is null

How to build an event listener for an event which not exist yet?
(I don’ t want to overwhelm visitors with a bunch of selectbox. They sould appear selection after selection)

Best and thanks in advance.

First off, I wouldn’t do this as it breaks several accessiblity best practices. Second, Onchange itself is an event listener, but again using that on a select dropdown breaks some accessibility best practices. I would recommend this as a multi step type form. Just my 2 cents.

Best practice for any script is to make it as intrusive as possible. That is the best script attach themselves to their respective objects (as opposed to being called inline, or had coded into a script file) :slight_smile:

Than being said, I think this particular case calls for Event Delegation.

btw, you used the term checkbox, bull all you mention in your code is a select element, so i will be using a select event for this example.

Basically, you attach listener to ancester element. and check the event.target, delegating the action from there.

	 document.body.addEventListener('change', delegtorFoo ) 
	 function delegtorFoo(event){
		  if (event.target.id == 'yourExpectedID'){ callYourFoo();}

	 }

the important thing to note is that event.target is the ACTUAL element that has fired the event. Please note, you can check for any element attribute that would let you know you have the correct kind of element to trigger your desire function. For example if you could have sever different select menus, which are secondary, but trigger a similar event, could could create them with a class (such as “secondary”) and check as such:

		 document.body.addEventListener('change', delegtorFoo ) 
 		 function delegtorFoo(event){
			  if (event.target.tagName == 'SELECT' && event.target.classList.contains('secondary') ){ callYourFoo();}

		 }

The above script will cause any SELECT element with a class of ‘secondary’ to call callYourFoo() on change, regardless on how and when the SELECT was added.

hope that helps!

1 Like