Question

A quick question really.. Could someone explain why the first example would work, yet the second does not.

   $(function()
   {  
      $("#select_one").change(function() 
      {
         alert('efjwelf');
      });
   });

### Example 2

  $("#select_one").change(function() 
  {
     alert('efjwelf');
  });

Thanks in advance

Answer 1

In the second example, the element you are binding (#select_one) to does not exist yet, so the event listener doesn’t get binded to anything.

When you call bind (or change, or other shortcut methods), the event listener only gets attached to the elements that the selector matches at that time. Elements added in the future do not get attached. To get around this, these methods are used:

• $(document).ready(function(){/*...*/}) or $(function(){/*...*/}) – This makes sure the document is ready before attaching events.
• $("selector").live(function(){/*...*/}) – This attaches the listener to all elements that match the selector, now or in the future.
• $("root").delegate("selector", "click", function(){/*...*/}) – This attaches the listener to all elements that match the selector with a root elements, now or in the future.