Question

我遇到一个问题，浏览器无法捕获点击引导按钮。

我的HTML是：

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

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

但点击d或barplot按钮后，变量heatmap未被更改。有什么问题？

Answer 1

您需要在点击事件处理程序中为d分配值：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap 3 - 无法捕获点击事件

1 个答案: