Bootstrap和jQuery click事件不起作用

Question

我有一个div元素，有几个inputs 。 当我开始对此进行编码时，我只有jQuery，并且输入的click事件正常运行。
然后，我添加了Bootstrap，该事件刚刚停止工作。
这是代码

<!DOCTYPE html>
<html>
<head>
<title>Qué Pido?</title>
</head>
<body>

<p id="que-pido"></p>

<!-- jQuery and Bootstrap -->
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript">
  $(document).ready(function() {
    getFromEndpoint("clasicas");    
  });

  function getFromEndpoint(endpoint) {
    $(document).ready(function() {
      $.get( "que" + "/" + endpoint, function( data ) {
        console.log(data);
        $( "#que-pido" ).html( data );
      });
    });
  }

  $(document).ready(function() {
    $(".categorias").click(function() {
      console.log("clicked: " + $(this));
      var endpoint = $(this).attr('id');
      getFromEndpoint(endpoint);
    });
  });
</script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-outline-primary active">
    <input type="radio" name="categorias" class="categorias" id="clasicas" autocomplete="off" checked> Cl&aacute;sicas
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="categorias" class="categorias" id="etnicas" autocomplete="off"> &Eacute;tnicas
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="categorias" class="categorias" id="todas" autocomplete="off"> Todas
  </label>
</div>

</body>
</html>

如果删除labels ，则会正确触发click方法……但是，当然，我不会得到Bootstrap提供的CSS。
我还尝试了删除Bootstrap的JS，但是随后我失去了按下每个按钮时发生的动画，并且我希望尽可能保留它。

有什么想法吗？
提前致谢

Answer 1

之所以不起作用，是因为Bootstrap隐藏了输入元素。 您实际上是在单击按钮集中的标签，而不是实际的元素。

var categoriasClicked = function() {
    console.log("clicked: " + $(this));
    var endpoint = $(this).attr('id');
    getFromEndpoint(endpoint);
}
$('.categorias').each(function() {
    if ($(this).closest('label').length > 0) {
        $(this).closest('label').click(function() {
            $(':radio', this).attr('checked', 'checked').each(categoriasClicked);
        });
    } else {
        $(this).click(categoriasClicked);
    }
}).filter(':checked').each(categoriasClicked);

Bootstrap按钮组的另一方面是，您最终会丢失单选按钮。 这是一些标记，添加了复选标记glyphicon。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-outline-primary active">
    <span class="glyphicon"></span>
    <input type="radio" name="categorias" class="categorias" id="clasicas" autocomplete="off" checked> Cl&aacute;sicas
  </label>
  <label class="btn btn-outline-primary">
    <span class="glyphicon"></span>
    <input type="radio" name="categorias" class="categorias" id="etnicas" autocomplete="off"> &Eacute;tnicas
  </label>
  <label class="btn btn-outline-primary">
    <span class="glyphicon"></span>
    <input type="radio" name="categorias" class="categorias" id="todas" autocomplete="off"> Todas
  </label>
</div>

<script type="text/javascript">
    var setIcons = function() {
        $('.glyphicon', this).addClass('glyphicon-unchecked').removeClass('glyphicon-check');
        $('.active .glyphicon', this).removeClass('glyphicon-unchecked').addClass('glyphicon-check');
    }
    $(document).on("click", '.btn-group', setIcons);
    $('.btn-group').each(setIcons);
</script>

看到这个小提琴https://jsfiddle.net/sdodvc3s/4/

编辑：您会在这段代码中注意到一个用于处理单选按钮单击的异常结构。 此代码旨在以某种不可知的方式处理单选点击事件。 可以将其抽象为jQuery插件，如下所示：

$.fn.radioClick(function( callback ) {
    return this.each(function() {
        if ($(this).closest('label').length > 0) {
            $(this).closest('label').click(function() {
                $(':radio', this).attr('checked', 'checked').each(callback);
            });
        } else {
            $(this).click(callback);
        }
    });
});

然后用于处理页面上的所有单选按钮，无论其样式如何。 使用该插件，您的代码将变为：

$('.categorias').radioClick(function() {
    console.log("clicked: " + $(this));
    var endpoint = $(this).attr('id');
    getFromEndpoint(endpoint);
}

Bootstrap和jQuery click事件不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-12-14 23:50:05

Bootstrap和jQuery click事件不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-12-14 23:50:05

解决方案1
1 已采纳 2016-12-14 23:50:05