title: Create Click Event for Dynamic Checkboxes JS
body: <p>I found out that i need to create an event for clicking dynamic checkboxes ... i found 100 solutions but none of them worked .. i'll post my idea how to solve this problem i got...
  May someone correct me ?</p>
  
  <p>Notice: Im using An Ajax function for executing an php script</p>
  
  <pre><code>var input = document.createElement("input");
  
  input.setAttribute("type", "checkbox");
  input.name = id;
  input.id = id;
  input.checked = "checked";
  input.className = "checkboxclass"
  
  //... adding some other things
  
  $(document).on('change', '[type=checkbox]', function () {
      alert('clicked'); // here i want to change if checked or unchecked
  });
  </code></pre>
  
  <p>EDIT: </p>
  
  <pre><code>function myAjax() {
      $.ajax({
          type: 'POST',
          data: {
              tbxQuestion: document.getElementById("tbxQuestion").value
          },
          url: '/evaluation/func/createOwnQuestion.php', // &lt;=== CALL THE PHP FUNCTION HERE.
          success: function (data) {
              if (data != 'Fehler') {
                  var array = data.split(':');
                  var id = array[0];
                  var name = array[1];
                  name = document.createTextNode(name);
  
                  if (!document.getElementById("ul")) {
                      var ul = document.createElement("ul");
  
                      ul.className = "collection with-header";
  
                      ul.id = "ul";
  
                      var lih = document.createElement("li");
  
                      lih.className = "collection-header";
  
                      var h = document.createElement("h4");
  
                      h.appendChild(document.createTextNode("Eigene Fragen"));
  
                      lih.appendChild(h);
                      ul.appendChild(lih);
  
                      document.getElementById("inputhidden").appendChild(ul);
  
                  } else {
                      var ul = document.getElementById("ul");
                  }
  
                  var li = document.createElement("li");
  
                  li.className = "collection-item";
  
                  var input = document.createElement("input");
  
                  input.setAttribute("type", "checkbox");
                  input.name = id;
                  input.id = id;
                  input.checked = "checked";
                  input.className = "checkboxclass"
  
                      var label = document.createElement("label");
  
                  label.for  = id;
  
              label.appendChild(name);
  
              li.appendChild(input);
  
              li.appendChild(label);
  
              ul.appendChild(li);
  
              Materialize.toast('Frage erfolgreich hinzugefügt!', 4000);
          } else {
              Materialize.toast('Fehler beim speichern der Frage ... Probier es später nochmal!', 4000);
  
          }
  
      },
      error: function (xhr) {
          alert("Fehler! CALL ADMIN!");
      }
  });
  }
   $(document).on('change', '[type=checkbox]', function (event) {
                  console.log(event.target.id + ' is ' + (event.target.checked ? 'checked' : 'unchecked'));
              });
  </code></pre>
  
  <p>Calling Function:</p>
  
  <pre><code>                                &lt;button id="erstellen" class="btn waves-effect waves-light" type="button" name="erstellen" onclick="myAjax(); return false;"&gt;Erstellen
                                  &lt;i class="material-icons right"&gt;send&lt;/i&gt;
                              &lt;/button&gt;
  </code></pre>
  
  <p>Dynamic testcheckbox</p>
  
  <pre><code>    var testchkbox = document.createElement("input");
  
  testchkbox.setAttribute("type", "checkbox");
  testchkbox.name = 12;
  testchkbox.id = 12;
  testchkbox.checked = "checked";
  testchkbox.className = "checkboxclass"
  
      var labeltest = document.createElement("label");
  
      labeltest.for = 12;
  
      labeltest.appendChild(document.createTextNode("test"));
  
  
  document.getElementById("inputhidden").appendChild(testchkbox);
  document.getElementById("inputhidden").appendChild(labeltest);
  </code></pre>