Skip to main content
added 212 characters in body
Source Link
Ifedi Okonkwo
  • 3.7k
  • 5
  • 37
  • 45

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); }); $('a').on('click', function(){ doSomething(); }); 

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); }); 

Again, if you wanted to leverage event delegation (e.g. to set up the event on the #container before your input.text is added to the DOM), this should come to mind:

$('#container').on('input', ':text', function(){ doSomething(); }); 

Sadly, again, it DOES NOT work currently!

Only this pattern works:

$(':text').on('input', function(){ doSomething(); }); 

EDITED WITH MORE CURRENT INFORMATION

I can certainly confirm that this pattern:

$('#container').on('input', ':text', function(){ doSomething(); }); 

NOW WORKS also, in all 'standard' browsers.

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); }); $('a').on('click', function(){ doSomething(); }); 

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); }); 

Again, if you wanted to leverage event delegation (e.g. to set up the event on the #container before your input.text is added to the DOM), this should come to mind:

$('#container').on('input', ':text', function(){ doSomething(); }); 

Sadly, again, it DOES NOT work currently!

Only this pattern works:

$(':text').on('input', function(){ doSomething(); }); 

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); }); $('a').on('click', function(){ doSomething(); }); 

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); }); 

Again, if you wanted to leverage event delegation (e.g. to set up the event on the #container before your input.text is added to the DOM), this should come to mind:

$('#container').on('input', ':text', function(){ doSomething(); }); 

Sadly, again, it DOES NOT work currently!

Only this pattern works:

$(':text').on('input', function(){ doSomething(); }); 

EDITED WITH MORE CURRENT INFORMATION

I can certainly confirm that this pattern:

$('#container').on('input', ':text', function(){ doSomething(); }); 

NOW WORKS also, in all 'standard' browsers.

added 279 characters in body
Source Link
Ifedi Okonkwo
  • 3.7k
  • 5
  • 37
  • 45

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); }); $('a').on('click', function(){ doSomething(); }); 

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); }); 

ButAgain, if you wanted to leverage event delegation (e.g. to set up the event on the #container before your input.text is added to the DOM), this should come to mind:

$('#container').on('input', ':text', function(){ doSomething(); }); 

Sadly, again, it DOES NOT work currently!

Only this pattern works:

$(':text').on('input', function(){ doSomething(); }); 

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); }); $('a').on('click', function(){ doSomething(); }); 

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); }); 

But this works:

$(':text').on('input', function(){ doSomething(); }); 

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); }); $('a').on('click', function(){ doSomething(); }); 

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); }); 

Again, if you wanted to leverage event delegation (e.g. to set up the event on the #container before your input.text is added to the DOM), this should come to mind:

$('#container').on('input', ':text', function(){ doSomething(); }); 

Sadly, again, it DOES NOT work currently!

Only this pattern works:

$(':text').on('input', function(){ doSomething(); }); 
Source Link
Ifedi Okonkwo
  • 3.7k
  • 5
  • 37
  • 45

Using jQuery, the following are identical in effect:

$('a').click(function(){ doSomething(); }); $('a').on('click', function(){ doSomething(); }); 

With the input event, however, only the second pattern seems to work in the browsers I've tested.

Thus, you'd expect this to work, but it DOES NOT (at least currently):

$(':text').input(function(){ doSomething(); }); 

But this works:

$(':text').on('input', function(){ doSomething(); });