Programmatically add radio items in javascript and onclick event

Question

I have a radio button and I'm adding elements to it programmatically. As you can see I set the onclick event in the html code but it is not triggered when I push the item.

<div class="btn-group" data-toggle="buttons" name="radio" id="selection">
</div>

<script type="text/javascript">
   var selection = document.getElementById("selection");
   selection.style.visibility = 'visible';
   var selectionToAdd='';
   var toAdd=[];
   for(var indexSelectionArticles = 0 in query) {
       for(var indexSelectionEntities = 0 in query[indexSelectionArticles].entities) {
            if(query[indexSelectionArticles].entities[indexSelectionEntities].category){
                if($.inArray(query[indexSelectionArticles].entities[indexSelectionEntities].category, toAdd) == -1) {
                    selectionToAdd=selectionToAdd + '<label class="btn btn-default"><input type="radio" onclick="javascript:console.log(whatever);" name="options" id="option'+query[indexSelectionArticles].entities[indexSelectionEntities].category+'">&nbsp; <i class="fa fa-'+query[indexSelectionArticles].entities[indexSelectionEntities].category+'"></i>&nbsp; '+capitalizeFirstLetter(query[indexSelectionArticles].entities[indexSelectionEntities].category)+' &nbsp;</input></label>';
                    toAdd.push(query[indexSelectionArticles].entities[indexSelectionEntities].category);
               }
           }
       }
   }
   selection.innerHTML = selectionToAdd;
</script>

The item are correctly added but the onclick is not triggered. I also tried with a function but the result is the same. I also tried the listener as follows, which works with other radios in the page but not for this one:

$('input[type="radio"]').on('click change', function(e) {

    if(e.target.id == 'option1') {
      option = 'option1';
    }
    else if(e.target.id == 'option2') {
      option = 'option2';
    }
    else if(e.target.id == 'option3') {
      option = 'option3';
    }
    else if(e.target.id == 'option4') {
      option = 'option4';
    }
    else if(e.target.id == 'option5') {
      visualizationType = 'articles';
    }
    else if(e.target.id == 'option6') {
      visualizationType = 'entities';
    }
    else {
      console.log(e.target.id);
    }
});

Where is the error?

Thank you

Chris G · Accepted Answer · 2016-06-08 16:16:31Z

1

You're wrapping the <input> in a <label>. Wouldn't the onclick event need to be on the <label> rather than the <input>?

answered Jun 8, 2016 at 16:16

Chris G

3692 silver badges9 bronze badges

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

Comments

Ted · Accepted Answer · 2016-06-08 16:19:24Z

0

It looks like you didn't initialize the 'query' variable in your script.

answered Jun 8, 2016 at 16:19

Ted

1261 silver badge10 bronze badges

Collectives™ on Stack Overflow

Programmatically add radio items in javascript and onclick event

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