Wie man Javascript-Ereignis in dynamisch erzeugtem Element hinzufügt?

Question

Immer wenn ich versuche, ein Ereignis für eine dynamisch erstellte Eingabe hinzuzufügen, kann ich kein Ereignis auslösen. Ich benutze icheck plugin, um diese Eingaben anzupassen, ich bin mir nicht sicher, ob das Problem von diesem kommt.

html

<div id="assurance"> 

</div> 

Funktion, die Eingangs

for(var i =0; i < data.RESPONSE.Products.Product.length; i++){ 
     assurHtml +='<div class="radio" onclick="update_gt();">'; 
     assurHtml +='<label>'; 
     assurHtml +='<input class="i-radio" type="radio" name="manuCode" id="manuCodes" onclick="update_gt();" value="'+data.RESPONSE.Products.Product[i].CODE+'_'+data.RESPONSE.Products.Product[i].NAME+'_'+data.RESPONSE.Products.Product[i].PRICE+'_'+data.RESPONSE.Products.Product[i].TAX+'" />'; 
     assurHtml +='</label>'; 
     assurHtml +='</div>'; 
} 
$('#assurance').html(assurHtml); 
$('#assurance input').iCheck({radioClass: 'i-check'}); 

function update_gt(){ 
    console.log($('input[name=manuCode]:checked').val()); 
} 

$('#assurance').delegate('input[name="manuCode"]', 'click', function(){ 
    console.log("fds"); 
}); 

$('#assurance').delegate('input[name="manuCode"]', 'ifToggled', function(){ 
    console.log("fds"); 
}); 

Answer 1

Erstellen Sie einfach verwenden .on(), so ...

$(document).on('click','.i-radio',function(){ 
     var theValue = $(this).val(); 
     if($(this).not(':checked')){ 
      $(this).prop("checked", true); 
      // Do your stuff you want to do when checked. 
      update_gt(); 
     } else { 
      $(this).prop("checked", false); 
      // Do your stuff you want to do when unchecked. 
      update_gt(); 
     } 
}); 

function update_gt(){ 
    console.log($('input[name=manuCode]:checked').val()); 
} 

Sie sich von all dem Onclick = update_gt los() 's

Jetzt haben Sie ha Ein-Klick-Handler, der alles verarbeitet.

Answer 2

Ich habe ein Beispiel für jsfiddle ausprobiert und es funktioniert. Ich würde prüfen, dass es ein Problem mit dem HTML ist, das Sie dynamisch generieren, und stellen Sie sicher, dass das update_gt() nicht in einer anderen Funktion gefunden wird, da das onclick = "update_gt()" es nicht ausführen wird. Ich würde persönlich alle update_gt() entfernen und das Ereignis über jquery anwenden.

var assurHtml = ""; 

for(var i =0; i < 5; i++) 
    { 
     assurHtml += '<input type="radio" name="manuCode" onclick="update_gt()"/>' 
    } 

    $('#assurance').html(assurHtml); 


function update_gt() 
{ 
    console.log($('input[name=manuCode]:checked').val()); 
} 

//$('#assurance').delegate('input[name="manuCode"]', 'click', function() 
$('#assurance').on('click', 'input[name="manuCode"]', function() 
{ 
    console.log("fds"); 
}); 

//$('#assurance').delegate('input[name="manuCode"]', 'ifToggled', function() 
$('#assurance').on('ifToggled','input[name="manuCode"]', function() 
{ 
    console.log("fds"); 
}); 

https://jsfiddle.net/5mq531nb/2/

Auch bei iCheck suchen. Es scheint einige Ereignisse zu geben, zu denen Sie sich anmelden können.

// For oncheck callback 
$('#checkbox_id').on('ifChecked', function() { //Do your code }) 

// For onUncheck callback 
$('#checkbox_id').on('ifUnchecked', function() { //Do your code })