jQuery click function doesnt work

Question

So I have a very simple code with form and one button with jQuery I want to bind some actions when user clicks on that button, but some reason it's not working

Here is the code

<!DOCTYPE html> 
<html> 
<head> 
 <script src="jquery.js"></script> 
</head> 
<body> 
<script> 
$('#jallerysubmit').bind('click', function() {
 alert('asd');
})
</script> 

<form> 
<input type="checkbox" name="box1">box1<br> 
<input type="checkbox" name="box1">box2<br> 
<input type="button" id="jallerysubmit" value="Proved"> 

</form> 
</body> 
</html>

please suggest what's wrong with this code as it does not work, even it does not produce any error

sje397 · Accepted Answer · 2010-12-19 14:42:34Z

7

You need to wrap it in a document ready handler.

<script> 
$(function() {
  $('#jallerysubmit').bind('click', function() {
    alert('asd');
  });
});
</script>

Docs: http://api.jquery.com/ready/

answered Dec 19, 2010 at 14:42

sje397

41.9k9 gold badges90 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Kling · Accepted Answer · 2010-12-19 14:46:24Z

The JavaScript code will be executed before the DOM is loaded, so the element with ID jallerysubmit cannot be found (it does not exists yet).

@sje397 described a very common way (at least when using jQuery) how to solve this. Another way is to put the script at the end of the document:

<html> 
   <head> 
       <script src="jquery.js"></script> 
    </head> 
    <body> 
        <form> 
            <input type="checkbox" name="box1">box1<br> 
            <input type="checkbox" name="box1">box2<br> 
            <input type="button" id="jallerysubmit" value="Proved"> 
        </form>
        <script> 
            $('#jallerysubmit').bind('click', function() {
                 alert('asd');
            });
        </script> 
    </body> 
</html>

tvanfosson · Accepted Answer · 2010-12-19 14:47:36Z

1

Your code attaching the handler is being executed before the element exists in the DOM, therefore the selector returns nothing and the handler is not applied. Put the code inside a document ready handler and it should work. You could also simplify by using the click shortcut.

<script> 
   $(function() {
       $('#jallerysubmit').click(function() {
           alert('asd');
       });
   });
</script>

answered Dec 19, 2010 at 14:47

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

sjobe · Accepted Answer · 2010-12-19 14:45:55Z

0

Include an alert("hello"); right after to make sure the jQuery is working right. Then add a return false to the end of your submit handle to make sure your page doesnt reload when the button is clicked, also use document.ready. See code below

<!DOCTYPE html> 
<html> 
<head> 
 <script src="jquery.js"></script> 
</head> 
<body> 
<script> 
$(document).ready(function(){
alert("hello");

$('#jallerysubmit').bind('click', function() {
 alert('asd');
 return false;
});

});
</script> 

<form> 
<input type="checkbox" name="box1">box1<br> 
<input type="checkbox" name="box1">box2<br> 
<input type="button" id="jallerysubmit" value="Proved"> 

</form> 
</body> 
</html>

answered Dec 19, 2010 at 14:45

sjobe

2,8373 gold badges24 silver badges33 bronze badges

Comments

Andrea Turri · Accepted Answer · 2010-12-19 14:52:26Z

0

Best practice is using an external .js file, example script.js:

$(document).ready(function() {
    yourFunction();
});

function yourFunction() {
    $('#jallerysubmit').click(function() {
        alert('asd');
    });
}

and import it in your html file in the tag head:

<script type="text/javascript" src="script.js"></script>

answered Dec 19, 2010 at 14:52

Andrea Turri

6,5207 gold badges41 silver badges64 bronze badges

Comments

Mohan Ram · Accepted Answer · 2010-12-19 15:23:08Z

0

Always use jquery function within

(document).ready(function(){//ur jquery codes});

or

$().ready(function(){//ur jquery codes});

or

$.noConflict();
jQuery(document).ready(function($){//ur codes});

Once DOM of page is loaded above ready function is initiated. so i recommend jquery lovers to write their magic codes always within this code

answered Dec 19, 2010 at 15:23

Mohan Ram

8,47125 gold badges85 silver badges132 bronze badges

Collectives™ on Stack Overflow

jQuery click function doesnt work

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related