【问题标题】:bootstrap 3 btn-group click eventbootstrap 3 btn-group 点击事件
【发布时间】:2015-12-19 15:30:19
【问题描述】:

我正在尝试弄清楚如何捕获点击事件。

​<div class="btn-group" data-toggle="buttons" id="group_period">
                                        <label class="btn btn-default" for="hrb" data-value="hourly">
                                            <input type="radio" id="hrb" name="period" value="hourly"> Hourly
                                        </label> 
                                        <label class="btn btn-default" for="drb" data-value="daily">
                                            <input type="radio" id="drb" name="period" value="daily"> Daily
                                        </label> 
                                        <label class="btn btn-default" for="wrb" data-value="weekly">
                                            <input type="radio" id="wrb" name="period" value="weekly"> Weekly
                                        </label> 
                                        <label class="btn btn-default active" for="mrb" data-value="monthly">
                                            <input type="radio" id="mrb" name="period" value="monthly"> Monthly
                                        </label> 
                                    </div>

我尝试了以下组合,但都没有。

 $('#group_period').change(function() {
          console.log($(this));
        });
     $('#group_period input').change(function() {
          console.log($(this));
        });

     $('#group_period label').on('click', function(event) {
          event.preventDefault(); // To prevent following the link (optional)
          console.log($(this));
        });

     $('#group_period input').on('click', function(event) {
          event.preventDefault(); // To prevent following the link (optional)
          console.log($(this));
        });

     $('#group_period input').on('click', function () {
            $(this).button('complete') // button text will be "finished!"
          });

     $('#group_period label').on('click', function () {
            $(this).button('complete') // button text will be "finished!"
          });


     $('#hrb').on('change', function(event) {
          event.preventDefault(); // To prevent following the link (optional)
          console.log($(this));
        });

    $("#hrb").bind("click", function () {
        $("#rangebox").html("Days: ");
        var select = $("#options");
        $(select).empty();
        for (var i = 1; i <= 30; i++)
            $("#options").append("<option value=" + i + ">" + i + "</option>");
        $(select).val("3");
    });

【问题讨论】:

    标签: twitter-bootstrap events button


    【解决方案1】:
    $("#hrb").on("change",function(){
    
       });
    

    对每个按钮都这样做...

    【讨论】:

    • 更改为全部 mouseup,不工作。没有任何点击有效
    • 您正在触发 div 上的更改事件,而我正在触发单选按钮上的更改事件。如果您想按照自己的方式进行操作,那么您应该在 id = group_period 的 div 上触发 click 事件,并且在此函数内部使用更改事件作​​为输入 id = hrb 等等。您可以直接在输入类型上使用更改事件,正如我在上面的示例中提到的那样
    猜你喜欢
    • 2019-02-19
    • 1970-01-01
    • 2017-02-22
    • 2015-10-27
    • 2019-11-05
    • 1970-01-01
    • 1970-01-01
    • 2014-07-29
    相关资源
    最近更新 更多