Jquery selector and event listening logic?

Question

I have just begin to studying Jquery for my current project. I am confused about selectors and listeners of Jquery objects.

$("input").change(function() {
  alert( "Handler for .change() called." );
});

This exact copy of http://api.jquery.com/change/ ... I changed the selector from ".target" to "input".

However none of input element are handled by change event.

I get this error. And i am pretty sure that there are elements with input name

"Uncaught TypeError: Cannot read property 'change' of null functions.js:378 (anonymous function)".

Is it something wrong with logic or is there a syntax error. I narrowed down the error this much but i still don't see the problem?

------EDIT------

I test the answers and all answers are right. When an event handler/listener assigned to elements via jquery selectors.

$("selectorStatement").EventHandlerShortCut(function() {
  //Some code
});

When below code executed

$("input").change // Change handler for ALL INPUT elements

Jquery engine get All the input elements ( !!All input elements that is declared and exist in that moment -the moment handler executed- !!)

After that moment if new element generated, Handler will not recognize that. The only thing that can prevent this is using $(document).ready which will call the code after whole document is created. As @Henrik Peinar , @Chandrika Prajapati , @G Z , @Gaurav , @Mzn Mentioned in their answers...

In addition to this, In my case,

I generate some inputs by using

document.anElement.innerHTML = "<foo></foo>"

Which is used after the document is ready. There can be 2 approach to this case.

This foo element can be generated while document is rendering. By using

display:none

So the element can be read by jquery engine when document is ready. And can be made visible when the comes.

Or.

$("fooSelector").handlerType(...

Handler caller can be called again again while page is dynamic. Which is a easy but a bad solution.

Answer 1

it sounds your selector return no results (null).

to verify this function get called when the markup is ready execute the statement when the document is fully loaded.

try use the following:

$(function () {

$("input").change(function() {
  alert( "Handler for .change() called." );
});


});

$(function() { ...}) is equivilant to $(document).ready(function() { ...});

Answer 2

As suggested in comments please make sure you call this function when the elements already exist in DOM.

Steps to do it:

Create DOM element

 <input type="text" />

When the DOM is loaded, call Javascript code

$("input").change(function() {
  alert( "Handler for .change() called." );
});

Here is working jsfiddle from you code http://jsfiddle.net/s3n57/

Answer 3

I think your comment Should these lines be at the bottom of the page? (after input elements declared) is right on.

$("input") will let jQuery check the DOM (document object model) and get all the input elements. You have none, because the DOM was not constructed yet. So you are thinking in the correct direction.

The general practice is to wait until the document is ready. In jQuery this is really easy and you can enter your code virtually anywhere like this:

<script>
$(function(){
    //do "on document ready" things.

});
</script>

Note that the code above is the fancy way of saying the following:

<script>
    $(document).ready(function(){
       //do "on document ready" things.

    });
</script>

They are identical, just the first has less characters to write.