html - Bootstrap 按钮在不应该被点击时被点击

Question

所以我有一个小问题；当我点击我的文本框时，它左边的按钮似乎也被点击了。我正在使用默认语法使用 Bootstrap 3.1.1。我怎样才能做到在单击文本框时不会同时单击按钮？

jsfiddle:http://jsfiddle.net/52VtD/6138/

有问题的代码:

<div class = "container-fluid">
        <div class = "row">
          <div class = "col-xs-12 col-sm-12 col-md-6 col-md-offset-3">
            <label>
              <div class="input-group">
                <span class="input-group-btn">
                    <button class = "btn btn-default no-outline" id = "customSearchButton" type = "button"><i class="glyphicon glyphicon-search"></i></button>
                </span>
                <input type="text" class="form-control" id = "searchTextbox" placeholder="Search SRGs...">
              </div>
            </label>
          </div>
        </div>
      </div><!-- .container-fluid -->

Answer 1

这是因为 <input group>包裹在 <label> 中.当您单击标签的任何部分时，该按钮将进入其事件状态。就像将复选框包装在标签内一样。

删除 <label>它将起作用。

Fiddle