How to add Javascript event in dynamically created element?

Question

Whenever I try to add an event on an input created dynamically, I am not able to fire an event on it. I am using icheck plugin to customize these inputs, I'm not sure, if the problem come from this.

html

<div id="assurance">

</div>

Function that create input

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");
});

why are you using update_gt(); on click event of div? and why do you need to attach the event again when you have already done that in the dynamic html that you generate? — Nilesh
– Nilesh, Commented Mar 29, 2016 at 14:14

Kylie · Accepted Answer · 2016-03-29 14:48:55Z

1

Just use .on(), like this...

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

Get rid of all the onclick=update_gt()'s

Now you have one click handler handling all of it.

edited Mar 29, 2016 at 14:48

answered Mar 29, 2016 at 14:39

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

joe.gonz · Accepted Answer · 2016-03-29 14:43:35Z

I tried out an example on jsfiddle and it is working. I would look into it being an issue with the html that you generate dynamically and make sure that the update_gt() is not found within another function since the onclick="update_gt()" will not execute it. I would personally remove all update_gt() and apply the event via 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/

Also, looking at iCheck. There seems to be some event you can register to.

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

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

Collectives™ on Stack Overflow

How to add Javascript event in dynamically created element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related