ダイナミックチェックボックスのクリックイベントを作成するJS

Question

ダイナミックチェックボックスをクリックするためのイベントを作成する必要があることがわかりました... 100個のソリューションが見つかりましたが、いずれも機能しませんでした。得た... 誰かが私を修正することができますか？

お知らせ：イムは、PHPスクリプトを実行するためのAjax機能を使用して

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> 

ダイナミック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の代わりに使用すると、パフォーマンス向上のために最も近い静的コンテナを使用する必要があります