javascript - 如何在动态创建的元素中添加Javascript事件？

Question

每当我尝试在动态创建的输入上添加事件时，我都无法在其上触发事件。我正在使用icheck plugin自定义这些输入，我不确定问题是否来自于此。

html

<div id="assurance">

</div>

创建输入的函数

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

只需使用.on()，就像这样......

 $(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() 的

现在您有了一键处理程序来处理所有这些事情。