CODEWITHSUNDEEP
jqueryimplementation
Niqql
Niqql

Reputation: 430

jQuery wont work with click on a button

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>

Upvotes: 0

Views: 35

Answers (3)

Jamb000h
Jamb000h

Reputation: 207

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.

Upvotes: 1

claudios
claudios

Reputation: 6656

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>

Upvotes: 0

VijayGupta
VijayGupta

Reputation: 675

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>

Upvotes: 0

Related Questions