ブートストラップ3 - クリックイベントをキャッチできません

Question

ブートストラップボタンをクリックしてもブラウザでキャプチャできないという問題があります。

私のHTMLは次のとおりです。

<script type="text/javascript"> 
    $("body").find(".btn").each(function(){ 
    $(this).bind('click', function(){ 
     $("input[name=chart_assist]").attr("value",$(this).find("input").val()); 
    }); 
    }); 
    var a=$('#data_buttons input:radio:checked').val(); 
    var b=$("#gene_list").val(); 
    var c=$("#sample_list").val(); 

    var d=$("input[name=chart_assist]").attr("value") 
    document.write(d); 
    $('#goodbutton').click(function(){ 
    $.post('heatmap.php',{data:a,ta_g:b,ta_s:c,chart:d},function(data){$("#ajax_output").html(data);}); 
    }); 
</script> 

しかしbarplotかheatmapボタンをクリックすると、変数dは変更されませんでした。

<div class="form-group"> 
    <input type="hidden" name="chart_assist" value="line" id="chart_input" /> 
    <div id="chart_buttons" class="btn-group" data-toggle="buttons"> 

    <label for="chart">Chart type</label><br/> 
    <label id="cb1" class="btn btn-default active" value="line"> 
     <input id="chart1" class="toggle chart_radio" type="radio" name="chart" value="line" autocomplete="off" checked="checked"/>line chart 
    </label> 
    <label id="cb2" class="btn btn-default" value="bar"> 
     <input id="chart2" class="toggle chart_radio" type="radio" name="chart" value="bar" autocomplete="off"/>barplot 
    </label> 
    <label id="cb3" class="btn btn-default" value="heatmap"> 
     <input id="chart3" class="toggle chart_radio" type="radio" name="chart" value="heatmap" autocomplete="off"/>heatmap 
    </label> 
</div> 

私のjsがあります。何が問題ですか？あなたはクリックイベントハンドラの内部でdに値を割り当てる必要があり

Answer 1

：

$("body").find(".btn").each(function(){ 
 
    $(this).on('click', function(){ 
 
     $("input[name=chart_assist]").attr("value",$(this).find("input").val()); 
 
    var d=$("input[name=chart_assist]").attr("value"); 
 
    $("#mon").html(d); 
 
    }); 
 
    });

#mon { 
 
    width: 100px; 
 
    height: 20px; 
 
    background: yellow; 
 
    color: green; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <input type="hidden" name="chart_assist" value="line" id="chart_input" /> 
 
    <div id="chart_buttons" class="btn-group" data-toggle="buttons"> 
 

 
    <label for="chart">Chart type</label><br/> 
 
    <label id="cb1" class="btn btn-default active" value="line"> 
 
     <input id="chart1" class="toggle chart_radio" type="radio" name="chart" value="line" autocomplete="off" checked="checked"/>line chart 
 
    </label> 
 
    <label id="cb2" class="btn btn-default" value="bar"> 
 
     <input id="chart2" class="toggle chart_radio" type="radio" name="chart" value="bar" autocomplete="off"/>barplot 
 
    </label> 
 
    <label id="cb3" class="btn btn-default" value="heatmap"> 
 
     <input id="chart3" class="toggle chart_radio" type="radio" name="chart" value="heatmap" autocomplete="off"/>heatmap 
 
    </label> 
 
</div> 
 
</div> 
 
<div id="mon"></div>