Javascript 单击时未调用Jquery函数

我有一个href url，当我单击该函数时，我需要获取一些信息，但我仍然喜欢href Jquery函数没有被调用

Jquery代码

$("#displayfood").click(function(){
    console.log("Function called")
});

<div class="panel-heading">
    <h4 class="panel-title">
        <a href="#collapse1" id="displayfood" data-parent="#accordion2" 
           data-toggle="collapse" class="btn-block collapsed"> 
            <img class="img-rounded" src="images/db-icons/default-food.png"> Pizza
        </a>
    </h4>
</div>

Html代码

$("#displayfood").click(function(){
    console.log("Function called")
});

<div class="panel-heading">
    <h4 class="panel-title">
        <a href="#collapse1" id="displayfood" data-parent="#accordion2" 
           data-toggle="collapse" class="btn-block collapsed"> 
            <img class="img-rounded" src="images/db-icons/default-food.png"> Pizza
        </a>
    </h4>
</div>

试试这个：

$(document).ready(function(){
   $("#displayfood").click(function(e){
      e.preventDefault();
      console.log("Function called");
    });
});

---

你把jquery代码放在哪里了？它必须在您定义displayfood的位置之后，否则在代码执行时将找不到该元素。或者，使用ready函数。

您需要在document.ready上绑定事件侦听器

$(document).ready(function() {
    $("#displayfood").click(function(){
       console.log("Function called")
    });    
});

$（文档）.ready（函数（）{
$（“#显示食物”）。单击（函数（）{
log（“调用的函数”）
});    
});
您的代码工作正常，只需确保以下事项

Jquery已加载
用

将js代码包装到document.ready中
参考：
在您应该使用的函数中：“return”false或“event.preventDefault（）”停止单击的默认事件

像这样：

$("#displayfood").click(function(){
       console.log("Function called")
       return false
 });

或：

如果您使用引导程序是因为我看到了相同的结构，但使用了错误的结构，请检查我的示例，然后单击即可正常工作；）


面板内容
$（“#显示食物”）。单击（函数（）{
警报（“调用的函数”）
});

jquery.click是.on（“click”）的简写，所以使用.on（“click”）

是否包含jQuery库？是否将其包装在dom Ready中？是否对tab view使用任何其他tab函数？
$("#displayfood").on("click",function(){
     console.log("Function called")
});