單擊時未調用jQuery函數

Question

單擊該函數時，我有一個href網址，我需要獲取一些信息，但沒有調用oncliking href Jquery函數

jQuery代碼

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

HTML代碼

<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>

Answer 1

嘗試這個：

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

Answer 2

在該函數中，應使用：“ return” false或“ event.preventDefault（）”停止默認的click事件。

像這樣 ：

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

要么：

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

Answer 3

您將jquery代碼放在哪里？ 它必須在定義displayfood的位置之后，否則在執行代碼時將找不到該元素。 或者，使用就緒功能。

Answer 4

您需要在document.ready上綁定事件監聽器。

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 5

您的代碼工作正常，只需確保遵循以下說明即可。

1. jQuery已加載
2. 用</img>關閉<img>標記
3. 將js代碼包裝在document.ready中

參考： http : //jsfiddle.net/fqLk9n02/

Answer 6

如果您因為我看到的結構相同但使用了錯誤而使用了引導程序，請檢查我的示例，然后單擊就可以了；）

<div class="panel panel-info">
  <div class="panel-heading">
     <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>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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

小提琴：

Answer 7

jQuery .click是.on（“ click”）的簡寫，因此請使用.on（“ click”）;

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