jQuery wont work with click on a button

Question

i got a problem a can't wrap my head around! I'm just trying to show 'test' in my console to see if my selector works. I commented out everything around it, the whole script, besides the selector, but it still wont work. I'm new to jQuery so maybe I Implemented something wrong? Here is my code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">

    $('#find').on("click", function(){
        console.log("test");
    });

</script>
</head>
<body>
    <p>Postleitszahl:</p>
    <input type="number" autocomplete="on" name="inp" class="inp">
    <button type="button" id="find">Finden</button>
    <p class="outp"></p>
</body>
</html>

you need to wait for the dom to be ready before you attach your handler - https://api.jquery.com/ready/ — billyonecan, Jul 01 '16 at 08:07

score 1 · Accepted Answer · edited May 23 '17 at 12:22

You could move your script block containing the function to the bottom of the body:

<!-- other code -->

<script type="text/javascript">
    $('#find').on("click", function(){
        console.log("test");
    });
</script>

OR you could use $(document).ready() in the head, like this:

<!-- other code -->

<script type="text/javascript">

    $(document).ready( function() {
      $('#find').on("click", function(){
          console.log("test");
      });
    })

</script>

The reason is that javascript doesn't recognize the elements before they've been loaded to the DOM.

You can find more information about loading scripts in here.

Thank you! I inserted the $(document).ready() and now it works! :) — Niqql, Jul 01 '16 at 10:12

claudios · Answer 2 · 2016-07-01T07:58:57.757

0

Try this code below. It should work now.

$('#find').click(function() {
  alert('button clicked!');
  console.log('test');
});

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

<p>Postleitszahl:</p>
    <input type="number" autocomplete="on" name="inp" class="inp">
    <button type="button" id="find">Finden</button>
    <p class="outp"></p>

edited Jul 01 '16 at 07:58

answered Jul 01 '16 at 07:53

claudios

6,588
8
47
90

score 0 · Answer 3 · answered Jul 01 '16 at 07:55

you can use this code it works!

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $('#find').on("click", function(){
       alert("test");
       console.log("test");
    });
});
</script>
</head>
<body>

<p>Postleitszahl:</p>
    <input type="number" autocomplete="on" name="inp" class="inp">
    <button type="button" id="find">Finden</button>
    <p class="outp"></p>

</body>
</html>

jQuery wont work with click on a button

3 Answers3