的jQuery/JavaScript的点击事件不起作用

-1

它可以很容易呼吸，但我只是没有看到我的代码中的错误...的jQuery/JavaScript的点击事件不起作用

我试图将一个点击事件添加到一个div与独特ID，但它根本不起作用。无论是使用jQuery还是javaScript。

代码：

$("#btnF5").click(function() { 
    alert("Handler for test1 called."); 
}); 

document.getElementById("btnF5").addEventListener("click", myFunction); 

function myFunction() { 
    alert("Handler for test2 called."); 
}

的jsfiddle： https://jsfiddle.net/ckom0pbo/

很抱歉，如果我在这一点上是鼠目寸光。

问候

来源

2016-11-16 R. Pülsinger

https：// jsfiddle。net/ckom0pbo/2 /您需要添加jQuery库 – Satpal

确保已加载jQuery库。当我启用jQuery时，它适用于我的jsFiddle。检查：https://jsfiddle.net/wq5xwrt6/它不适用于纯JavaScript事件，因为它必须包含在窗口onLoad事件中。 – Vaidas

注2点 -

添加jQuery库第一
包装你的所有代码到功能齐全Ready function

$(document).ready(function(){ 
 
$("#btnF5").click(function() { 
 
    alert("Handler for test1 called."); 
 
}); 
 
document.getElementById("btnF5").addEventListener("click", myFunction); 
 

 
function myFunction() { 
 
    alert("Handler for test2 called."); 
 
} 
 
})

div{ 
 
    width: 100px; 
 
    border: 1px solid; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <nav class="navbar navbar-default navbar-fixed-bottom"> 
 
    <div class="container col-md-12 col-lg-12 fkey-container-12"> 
 
      <div class="col-md-4 col-lg-4 fkey-container-4"> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF1" data-url="">Hilfe</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF2">&nbsp;</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF3">&nbsp;</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF4">&nbsp;</div> 
 
      </div> 
 
      <br /> 
 
      <div class="col-md-4 col-lg-4 fkey-container-4"> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF5" data-url="">Start</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF6">&nbsp;</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF7">&nbsp;</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF8">&nbsp;</div> 
 
      </div> 
 
      <br /> 
 
      <div class="col-md-4 col-lg-4 fkey-container-4"> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF9">&nbsp;</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF10">&nbsp;</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF11">&nbsp;</div> 
 
         <div class="btn btn-default btn-gevau btn-fkey2" id="btnF12" data-url="">Ende</div> 
 
      </div> 
 
    </div> 
 
</nav>

来源

2016-11-16 11:39:01 Chetan

试试这个，

$(function() { 
    $("#btnF5").click(function() { 
    alert("Handler for test1 called."); 
    }); 

    document.getElementById("btnF5").addEventListener("click", myFunction); 

    function myFunction() { 
    alert("Handler for test2 called."); 
    } 

});

来源

2016-11-16 11:37:51

你的jsfiddle工作正常，但是，你忘了导入的jQuery在你的jsfiddle。

我已经更新了您的JSFiddle以包含jQuery，我还添加了红色背景以查看哪些div获取了点击事件。

#btnF5 { 
    background: red; 
}

https://jsfiddle.net/ckom0pbo/3/

来源

2016-11-16 11:37:58 Michael

如果你所做的一切都是正确的，那么唯一合乎逻辑的理由是，你执行的代码块被加载的jQuery之前。尝试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="btnF5">Click me</button> 
 

 
<script> 
 
    $(document).ready(function(){ 
 
    $("#btnF5").click(function() { 
 
     alert("Handler for test1 called."); 
 
    }); 
 

 
    }); 
 
    </script>

来源

2016-11-16 11:47:22

的问题是，你没有jQuery库添加到的jsfiddle。我在你的基地例如添加 Fiddle with jquery

$("#btnF5").click(function() { 
    alert("Handler for test1 called."); 
}); 

document.getElementById("btnF5").addEventListener("click", myFunction); 

function myFunction() { 
    alert("Handler for test2 called."); 
}

看看如何将一个JS库添加到的jsfiddle How To add a js library to JsFiddle

来源

2016-11-16 11:51:07

您还没有包含在JS提琴jQuery库。

您可以通过单击JS部分右上角的javascript标签来包含该库。

并从那里选择jQuery。

之后，你看到你的代码工作。

来源

2016-11-16 12:02:55

的jQuery/JavaScript的点击事件不起作用

回答

相关问题