title: How to listen to different listener with event delegation
body: <p>I have some data created dynamically like the below snippet</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const resultsDiv = document.getElementById("results");
  const getList = document.getElementById("example");
  
  document.querySelector(".container").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.type &amp;&amp; tgt.type === "radio") {
      const hide = tgt.classList.contains("verify-no");
      [...tgt.closest(".card-body").querySelectorAll("p.card-text")].forEach(par =&gt; par.classList.toggle("d-none", hide))
    }
  })
  
  getList.addEventListener("click", e =&gt; {
  
    let results = ['a', 'b', 'c'];
  
    results.forEach((el, idx) =&gt; {
      //carousel
      const carouselItem = document.createElement("div");
      if (idx === 1) {
        carouselItem.classList.add("carousel-item", "active");
      }
      carouselItem.classList.add("carousel-item");
  
      //row below carousel
      const row = document.createElement("div");
      row.classList.add("row");
  
      //column for rows
      const column = document.createElement("div");
      column.classList.add("col-md-12", "mb-3");
  
      // card for each carousel inside column
      const card = document.createElement("div");
      card.classList.add("card");
  
      // card body for card
      const cardBody = document.createElement("div");
      cardBody.classList.add("card-body", "text-center");
  
      // card text (upload info)
      const cardTextUploadedOn = document.createElement("p");
      cardTextUploadedOn.classList.add("card-text");
      cardTextUploadedOn.innerText = "adsadad";
  
      const cardTextUploadedBy = document.createElement("p");
      cardTextUploadedBy.classList.add("card-text");
      cardTextUploadedBy.innerText = "adsadad";
  
      // show predictions
      const formGroup = document.createElement("div");
      formGroup.classList.add("form-group", "row");
  
      const predLabel = document.createElement("div");
      predLabel.classList.add("col-lg-12");
      predLabel.innerText = "Select";
  
      const dummy = document.createElement("div");
      dummy.classList.add("col-sm-10");
  
      formGroup.appendChild(predLabel);
      formGroup.appendChild(dummy);
  
      // yes / no options
      const verifyRow = document.createElement("div");
      verifyRow.classList.add("row");
  
      const verifyLegend = document.createElement("legend");
      verifyLegend.classList.add("col-form-label", "col-lg-12", "pt-0");
      verifyLegend.innerText = "Is this correct ?";
  
      const verifyDummy = document.createElement("div");
      verifyDummy.classList.add("col-sm-10");
  
      const verifyYesFormCheck = document.createElement("div");
      verifyYesFormCheck.classList.add("form-check");
  
      const verifyNoFormCheck = document.createElement("div");
      verifyNoFormCheck.classList.add("form-check");
  
      const yesInput = document.createElement("input");
      yesInput.classList.add("form-check-input", "verify-yes");
      yesInput.type = "radio";
      yesInput.checked = true; // this will check it
      yesInput.name = "choosePred" + idx;
      yesInput.value = "Yes";
  
      const verifyYesLabel = document.createElement("label");
      verifyYesLabel.classList.add("form-check-label", "verify-yes");
      verifyYesLabel.innerText = "Yes";
  
      const verifyNoLabel = document.createElement("label");
      verifyNoLabel.classList.add("form-check-label", "verify-no");
      verifyNoLabel.innerText = "No";
  
      const noInput = document.createElement("input");
      noInput.classList.add("form-check-input", "verify-no");
      noInput.type = "radio";
      noInput.name = "choosePred" + idx;
      noInput.value = "No";
  
      // yes no options end
  
      // select //
      const selectForm = document.createElement("div");
      selectForm.classList.add("form-group", "selectGroup");
  
      const selectCLabel = document.createElement("label");
      selectCLabel.innerText = "Select C";
  
      const selectPLabel = document.createElement("label");
      selectPLabel.innerText = "Select P";
  
      //select for crop options
      const selectC = document.createElement("select");
      selectC.classList.add("form-control", "c-select");
  
      //select for pest options
      const selectP = document.createElement("select");
      selectP.classList.add("form-control", "p-select");
  
      const c_names = ['abc', 'abcd', 'gef']
  
      for (const c of c_names) {
        const option = document.createElement("option");
        option.innerText = c;
        if (c === "Select") {
          option.selected = true;
        }
        selectC.appendChild(option);
      }
  
      // select //
      resultsDiv.appendChild(carouselItem);
      carouselItem.appendChild(row);
      row.appendChild(column);
      column.appendChild(card);
      card.appendChild(cardBody);
      cardBody.appendChild(cardTextUploadedBy);
      cardBody.appendChild(cardTextUploadedOn);
      cardBody.appendChild(formGroup);
      cardBody.appendChild(verifyRow);
      verifyRow.appendChild(verifyLegend);
      verifyRow.appendChild(verifyDummy);
      verifyDummy.appendChild(verifyYesFormCheck);
      verifyDummy.appendChild(verifyNoFormCheck);
      verifyYesFormCheck.appendChild(yesInput);
      verifyYesFormCheck.appendChild(verifyYesLabel);
      verifyNoFormCheck.appendChild(noInput);
      verifyNoFormCheck.appendChild(verifyNoLabel);
      cardBody.appendChild(selectForm);
      selectForm.appendChild(selectCLabel);
      selectForm.appendChild(selectC);
      selectForm.appendChild(selectPLabel);
      selectForm.appendChild(selectP);
  
    });
    // if needed later
    // [...document.querySelectorAll(".verify-yes")].forEach(radio =&gt;  radio.checked=true)
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"&gt;
    &lt;link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css'&gt;
    &lt;link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/advisory-new.css') }}" /&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;button id="example"&gt;Show results&lt;/button&gt;
  
    &lt;section class="pt-5 pb-5"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row m-auto"&gt;
          &lt;div class="col-6"&gt;
            &lt;h3 class="mb-3"&gt;Some heading&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="col-6 text-right"&gt;
            &lt;a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev"&gt;
              &lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16"&gt;
                &lt;path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" /&gt;
              &lt;/svg&gt;
            &lt;/a&gt;
            &lt;a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next"&gt;
              &lt;svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16"&gt;
                &lt;path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" /&gt;
              &lt;/svg&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 col-lg-4 col-xs-12 col-sm-12 m-auto shadow-lg p-3"&gt;
            &lt;div id="carouselExampleIndicators2" class="carousel slide" data-interval="false" data-ride="carousel"&gt;
              &lt;div class="carousel-inner" id="results"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here i have been already using an click listener to listen to dynamically created <code>radio</code> button ,
  but I am stuck completely on how to listen to dynamically created <code>Select</code> -&gt; on change listener</p>
  <ul>
  <li>please click on <code>show results</code> button to view carousel-items</li>
  </ul>
  <p>Any help is much appreciated ...</p>