Создать событие Click для динамических флажков JS

Question

Я выяснил, что мне нужно создать событие для щелчка динамических флажков ... я нашел 100 решений, но никто из них не работал. Я отправлю сообщение о том, как решить эту проблему. I получил ... Может кто-нибудь меня поправит?

Примечание: Im с помощью функции Ajax для выполнения сценария PHP

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

EDIT:

function myAjax() { 
    $.ajax({ 
     type: 'POST', 
     data: { 
      tbxQuestion: document.getElementById("tbxQuestion").value 
     }, 
     url: '/evaluation/func/createOwnQuestion.php', // <=== 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')); 
      }); 

Вызов функции:

       <button id="erstellen" class="btn waves-effect waves-light" type="button" name="erstellen" onclick="myAjax(); return false;">Erstellen 
           <i class="material-icons right">send</i> 
          </button> 

Dynamic testcheckbox

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

Answer 1

Когда вы используете Event Delegation, просто привяжите обработчик событий один раз, затем event.target можно использовать для получения элемента DOM, который инициировал событие. Тогда его различные свойства могут быть использованы как checked.

$(document).on('change', '[type=checkbox]', function (event) { 
 
    console.log(event.target.id + ' is ' + (event.target.checked ? 'checked' : 'unchecked')); 
 
}); 
 

 
var input = document.createElement("input"); 
 
input.setAttribute("type", "checkbox"); 
 
input.id='checkbox1'; 
 
input.checked = true; 
 
input.className = "checkboxclass" 
 
$(document.body).append(input) 
 

 

 
var input = document.createElement("input"); 
 
input.setAttribute("type", "checkbox"); 
 
input.id='checkbox2'; 
 
input.checked = true; 
 
input.className = "checkboxclass" 
 
$(document.body).append(input)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Примечание: Вместо document вы должны использовать ближайший статический контейнер для лучшей производительности