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（）的

现在你有一个点击处理程序处理所有这些。

Answer 2

我在jsfiddle上尝试了一个例子，它正在运行。我会调查它是动态生成的html问题，并确保在另一个函数中找不到update_gt（），因为onclick =＆＃34; update_gt（）＆＃34;不会执行它。我个人会删除所有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 })

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

2 个答案: