Bootstrap和jQuery单击事件不起作用

我有一个div元素与几个inputs。当我开始编写代码时，我只有jQuery，并且输入的click事件正常运行。
然后，我添加了Bootstrap，事件刚停止工作。
这是代码Bootstrap和jQuery单击事件不起作用

<!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方法正确解雇...但当然，我得到的是没有提供自举的CSS。
我也尝试删除Bootstrap的JS，但后来我失去了按下每个按钮时发生的动画，如果可能的话我想保留。

对此的任何想法？
在此先感谢

来源

2016-12-14 jmm

dev控制台中的任何错误？ – j08691

@ j08691没有错误。 'console.log（data）;'这行甚至没有记录 – jmm

@ Alexandru-Ionut Mihai对不起，我不明白你的意思是什么插件 – jmm

这不起作用的原因是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);

引导按钮组的另一个方面是最终失去单选按钮。这里有一些标记添加了复选标记图形。

<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); 
}

来源

2016-12-14 23:50:05 B2K

非常感谢您的非常详细的答案。尽管它看起来没有像现在这样工作，但是你的**“你实际上点击了一个按钮集中的标签，而不是实际的元素”**评论让我想到了将categorias类设置为标签，使它工作 – jmm

这个小提琴的作品。 – B2K

对不起，我没有说清楚：我只粘贴了上半部分（不是全部小提琴），然后将这个类添加到标签中。谢谢 – jmm

Bootstrap和jQuery单击事件不起作用

回答

相关问题