单击时未调用jQuery函数

Question

I have a href url when I clicked that function I need to get some information but I oncliking the href Jquery function is not being called

Jquery code

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

Html code

<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

try this:

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

Answer 2

In the function you should use: "return" false or "event.preventDefault()" to stop the default event of click.

like this :

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

or:

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

Answer 3

Where did you put the jquery code? It needs to be after where you have defined the displayfood, otherwise that element will not be found when code executes. Alternatively, use the ready function.

Answer 4

You need to bind the event listener on 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

Your code works fine, just ensure following things.

1. Jquery is loaded
2. Close <img> tag with </img>
3. Wrap js code inside document.ready

Reference: http://jsfiddle.net/fqLk9n02/

Answer 6

If you use bootstrap because I saw the same structure but used wrong, check my example and on click works just fine ;)

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

FIDDLE:

Answer 7

jquery .click is shorthand for .on("click") so use the .on("click");

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