为什么函数在javascript，codeigniter中调用了这么多次？

Question

使用codeigniter框架，首先我从数据库中获取输入字段，并按类型显示在视图中。我们可以动态创建字段并在按钮后追加。您想知道我们可以通过选择选项来更改字段类型。是否选择无线电选项将创建具有输入字段的tr（单选框）以获取数字以生成无线电选项。获取数字后，将动态创建字段。毕竟问题是当我选择无线电选项时，java脚本函数在第一次尝试时调用单次。但在第二次尝试时，它会多次调用。

查看

<button class="btn btn-primary" type="button" onclick="AddNewField()
 Add Field</button>

<?php $i=1000; 
   foreach($field_rec as $index=>$val){
    $customeFiled_value=str_replace(array("_"),' ',$index);?>
    <tr id="<?php echo $i;?>">
        <td>
            <div class="form-group">
                <input type="text" title="" name="field[]" class="form-control text" value="<?php echo $customeFiled_value;?>" />
            </div>
        </td>
        <td>
            <div class="form-group">
                <input title="" name="alternate_text[<?= $index ?>]" class="form-control alternate_text" value="<?= ((array_key_exists($index, $alternate_fields))?$alternate_fields[$index]:'') ?>"  type="text">
            </div>
        </td>
        <td>
            <div class="form-group">
                <select class="form-control typeOption" name="type[]" onclick="showRadioBox(<?php echo $i;?>)">
                    <option value='textbox' <?php if($val=='textbox'){ echo 'selected="selected"'; }?>>Text Box</option>
                    <option value='textarea' <?php if($val=='textarea'){ echo 'selected="selected"'; }?>>Text Area</option>
                    <option value='date' <?php if($val=='date'){ echo 'selected="selected"'; }?>>Date</option>
                    <option value='radio' <?php if($val=='radio'){ echo 'selected="selected"'; }?>>Radio</option>
                </select>
            </div>
        </td>   
        <td>
            <div class="form-group">
                <a href="javascript:void(0);" onclick="RemoveThisItem('<?php echo $i;?>')" title="Remove"><i class="fa fa-fw fa-trash-o"></i></a>
            </div>
        </td>   
    </tr>
    <?php $i++; 
    }
}?>

的JavaScript

//添加字段

function AddNewField(){
    var tId=$.now(); 

    $('.tbody').append("<tr id='"+tId+"'>"+
                        "<td>"+
                           "<div class='form-group'>"+
                                "<input type='text' class='form-control text' name='field[]'/>"+
                            "</div>"+
                        "</td>"+
                        "<td>"+
                            "<div class='form-group'>"+
                                "<select class='form-control typeOption' name='type[]' onclick='showRadioBox("+tId+")'>"+
                                    "<option value='textbox'>Text Box</option>"+
                                    "<option value='textarea'>Text Area</option>"+
                                    "<option value='date'>Date</option>"+
                                    "<option value='radio'>Radio</option>"+
                                "</select>"+
                            "</div>"+
                        "</td>"+
                        "<td>"+
                            "<div class='form-group'>"+
                                "<a href='javascript:void(0);' onclick='RemoveThisItem("+tId+")' title='Remove'><i class='fa fa-fw fa-trash-o'></i></a>"+
                            "</div>"+
                        "</td>"+
                    "</tr>");
}

//显示单选框

function showRadioBox(id){
  $('.typeOption').change(function(id){
        if($(this).val() == 'radio'){
            $(this).closest('tr').after("<tr class='showRadioBox'>"+
                                            "<td colspan='2'>"+
                                                "<div class='form-group'>"+
                                                    "<label for=''><b>Enter number of Radio Option:</b></label>"+
                                                        "<input type='text' class='form-control getRadioValue' name='test'/>"+
                                                    "</div>"+
                                                "</td>"+
                                                "<td style='padding-top:25px;'>"+
                                                    "<button type='button'  class='btn btn-info btn-block ' onclick='createRadioOption(this)' id='"+id+"'>Create Options</button>"+
                                                "</td>"+
                                            "</tr>"+
                                            "<tr>"+
                                             "<td colspan='3' class='radioInputsCol'>"+
                       // append inputs for option here
                                             "</td>"+
                                            "</tr>");
        }
        else{
            $(this).closest('tr').next('.showRadioBox').hide();
        }
    });
}

//为广播选项创建多个字段

function createRadioOption(e){

    var val = $(e).closest('tr').find('.getRadioValue').val();
    var tr=$(e).closest('tr');
    var sib=tr[0].nextSibling;
    var td=$(sib).children('td');

    $(td).empty();
    for(i=0; i<val; i++){
        $(td).append('<div class="col-md-4">'+
                        '<input type="text" class="form-control" placeholder="Radio option-'+(i+1)+'">'+
                    '</div>');
    }
}