動的に作成された要素にJavascriptイベントを追加するにはどうすればよいですか？

Question

動的に作成された入力にイベントを追加しようとするたびに、イベントを発生させることができません。私はicheck pluginを使用してこれらの入力をカスタマイズしていますが、問題がこのような場合はわかりません。

HTMLだけ（.on使用入力

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

を作成

<div id="assurance"> 

</div> 

機能）は、次のように...

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

は、すべてのonclick = update_gtを取り除きます（）の

すべてを処理する1つのクリックハンドラ。

Answer 2

私はjsfiddleのサンプルを試してみました。私はあなたが動的に生成し、onclick = "update_gt（）"を実行しないので、別の関数内でupdate_gt（）が見つからないことをhtmlで調べることにします。私は個人的にすべてのupdate_gt（）を削除し、jquery経由でイベントを適用します。また

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/

、iCheckを見ています。あなたが登録できるイベントがあるようです。

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

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