Home/ Questions/Q 993097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:21:59+00:00

I am learning jquery and I am having difficulty running the following extremely simple

  • 0

I am learning jquery and I am having difficulty running the following extremely simple code.

My HTML looks like:

<html>
<head>
    <title>JQUERY</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>

<input type="button" id="testbutton" value="test" />

</body>

My script.js looks like this:

$(document).ready(function(){
  alert('document is ready');
});
$('#testbutton').click(function(){
  alert('button clicked');
});

When I load the page in browser … I get the first alert when the document is loaded (so I am sure that I am at least using the correct library and it is getting downloaded etc).

However, when I click my button I do not see the second alert that says “button has been clicked”

What am I missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The click handler needs to go inside your $(document).ready, to ensure that it is bound when the DOM is ready, and the element is guaranteed to be available for Javascript processing:

    $(document).ready(function(){
    alert('document is ready');

    // bind a click handler to #testbutton when the DOM has loaded
    $('#testbutton').click(function(){
      alert('button clicked');
    });
});

    From the documentation:

    This is the first thing to learn about
    jQuery: If you want an event to work
    on your page, you should call it
    inside the $(document).ready()
    function. Everything inside it will
    load as soon as the DOM is loaded and
    before the page contents are loaded.

    • 0