jQuery/javaScript click-Event doesn't work

Question

it's may be easy as breathing but I just dont see the mistake in my code...

I try to add an click-Event to a div with an unique ID but it does not work at all. Neither with jQuery or javaScript.

Code:

$("#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/

Sorry if I am just dumb at this point.

Greetings

https://jsfiddle.net/ckom0pbo/2/ You need to add jQuery library — Satpal, Nov 16 '16 at 11:34
Make sure that jQuery library is loaded. It works for me in your jsFiddle when I enable jQuery. Check: https://jsfiddle.net/wq5xwrt6/ It doesn't work with pure JavaScript event because it must be included in window onLoad event. — Vaidas, Nov 16 '16 at 11:37

score 2 · Accepted Answer · answered Nov 16 '16 at 11:39

Note 2 points-

Add jquery library first
Wrap your all code into ready function 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>

score 0 · Answer 2 · answered Nov 16 '16 at 11:37

try this,

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

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

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

});

score 0 · Answer 3 · answered Nov 16 '16 at 11:37

Your JSFiddle is working fine, however, you forgot to import jQuery in your JSFiddle.

I've updated your JSFiddle to include jQuery, I also added a red background to see what div was getting the click-event.

#btnF5 {
  background: red;
}

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

score 0 · Answer 4 · answered Nov 16 '16 at 11:47

If you have done everything right then the only logical reason is that you are executing the code block before jquery is loaded. Try

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

score 0 · Answer 5 · edited May 23 '17 at 12:13

The problem is that you didnt add jquery library to the jsfiddle. I added in your base example Fiddle with jquery

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

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

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

Look how to add a js library to jsFiddle How To add a js library to JsFiddle

score 0 · Answer 6 · answered Nov 16 '16 at 12:02

0

You have not included the jquery library in JS fiddle .

You can include the library by clicking on the javascript tag at the right top of the JS section .

and selecting jquery from there .

After that you see your code working.

answered Nov 16 '16 at 12:02

Robert Ravikumar

912
2
11
29

jQuery/javaScript click-Event doesn't work

6 Answers6