以编程方式在javascript和onclick事件中添加无线电项目

时间:2016-06-08 16:07:22

标签: javascript html radio-button

我有一个单选按钮,我正在以编程方式添加元素。正如您所看到的,我在html代码中设置了onclick事件,但是当我按下该项时它不会被触发。

<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>

项目已正确添加,但未触发onclick。我也试过一个函数但结果是一样的。我也尝试了如下的监听器,它与页面中的其他无线电一起使用,但不适用于此:

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

错误在哪里?

谢谢

2 个答案:

答案 0 :(得分:1)

您将<input>包裹在<label>中。 onclick事件不会出现在<label>而不是<input>吗?

答案 1 :(得分:0)

看起来您没有初始化查询&#39;脚本中的变量。