CODEWITHSUNDEEP
javascriptjqueryhtml
karthe
karthe

Reputation: 13

Jquery function not being called on Clicking

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>

Upvotes: 0

Views: 85

Answers (7)

user3634064
user3634064

Reputation: 5

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

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

Upvotes: 0

BurebistaRuler
BurebistaRuler

Reputation: 6519

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:

Upvotes: 0

Super Hornet
Super Hornet

Reputation: 2907

try this:

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

Upvotes: 1

Einstein
Einstein

Reputation: 11

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

Upvotes: 1

Manoj
Manoj

Reputation: 539

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/

Upvotes: 0

mehmetseckin
mehmetseckin

Reputation: 3107

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>

Upvotes: 0

Andrew Luo
Andrew Luo

Reputation: 927

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.

Upvotes: 0

Related Questions