单击时不调用Jquery函数

时间:2014-10-27 07:35:03

标签: javascript jquery html

当我点击该函数时,我有一个href url我需要获取一些信息,但是我对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>

7 个答案:

答案 0 :(得分:1)

试试这个:

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

答案 1 :(得分:1)

在你应该使用的函数中:“return”false或“event.preventDefault()”来停止点击的默认事件。

像这样:

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

或:

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

答案 2 :(得分:0)

你在哪里放了jquery代码?它需要在您定义displayfood之后,否则在代码执行时将找不到该元素。或者,使用就绪功能。

答案 3 :(得分:0)

您需要在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>

答案 4 :(得分:0)

您的代码运行正常,只需确保以下事项。

  1. 加载Jquery
  2. 使用<img>
  3. 关闭</img>代码
  4. 在document.ready
  5. 中包装js代码

    参考:http://jsfiddle.net/fqLk9n02/

答案 5 :(得分:0)

如果你使用bootstrap,因为我看到了相同的结构但使用了错误,请检查我的示例,然后单击就可以了;)

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

答案 6 :(得分:0)

jquery .click是.on(“click”)的缩写,所以请使用.on(“click”);

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