ansaurus

Question

Learning JQuery: noob question about button click

Answer 1

+3 A:

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.

karim79 2010-08-17 00:24:26

Answer 2

+1 A:

You probably want to bind your event handler inside the $(document).ready() event:

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

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

This makes sure the DOM is loaded before your other script gets executed. See if this solves your problem.

RMorrisey 2010-08-17 00:24:46

Answer 3

+1 A:

You also need that click binding inside a document.ready, like this:

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

The why? is that the selector $('#testbutton') won't find the element id="testbutton" if it's not ready when the selector runs, so it needs to be run after the element in the page, or in a document.ready handler like above.

Nick Craver 2010-08-17 00:25:05

ansaurus

tags:

views:

answers:

Learning JQuery: noob question about button click

related questions