jQuery / javaScript click-Event不起作用

Question

這可能像呼吸一樣容易，但是我只是看不到代碼中的錯誤...

我嘗試將click-Event添加到具有唯一ID的div中，但是它根本不起作用。 都不使用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/

抱歉，我現在還是傻瓜。

問候

Answer 1

注2點-

1. 首先添加jQuery庫

2. 將所有代碼包裝到ready函數Ready函數中

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

Answer 2

嘗試這個，

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

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

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

});

Answer 3

您的JSFiddle工作正常，但是，您忘記了在JSFiddle中導入jQuery。

我已經更新了您的JSFiddle以包括jQuery，還添加了一個紅色背景，以查看div正在獲得點擊事件。

#btnF5 {
  background: red;
}

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

Answer 4

如果一切都做對了，那么唯一的邏輯原因就是您在加載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> 

Answer 5

問題是您沒有將jQuery庫添加到jsfiddle中。 我在基本示例Fiddle中添加了jquery

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

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

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

看看如何將js庫添加到jsFiddle中如何將js庫添加到JsFiddle中

Answer 6

您尚未在JS小提琴中包含jquery庫。

您可以通過單擊JS部分右上方的javascript標簽來包含該庫。

然后從那里選擇jquery。

之后，您將看到代碼正常工作。