I am using jquery 1.8.3 so trying to change from using .live() to the .on() Like many others on SO - cant get it worrking - what am i doing wrong? If its so wrong to use .live() why does it work so consistently well!

( txtbxhost is a textbox NOT added dynamically its already in the DOM )

$('#txtbxhost').live('input', function() {
  // works everytime            
});


$('#txtbxhost').on('change', 'input',  function() {
   // fails everytime           
});

and

$('#txtbxhost').on('change', '#txtbxhost',  function() {
   // fails everytime           
});

and

$(document).on('change', '#txtbxhost',  function() {
   // fails everytime           
});

i'm out of ideas here ... help ...

I am using jquery 1.8.3 so trying to change from using .live() to the .on() Like many others on SO - cant get it worrking - what am i doing wrong? If its so wrong to use .live() why does it work so consistently well!

( txtbxhost is a textbox NOT added dynamically its already in the DOM )

$('#txtbxhost').live('input', function() {
  // works everytime            
});


$('#txtbxhost').on('change', 'input',  function() {
   // fails everytime           
});

and

$('#txtbxhost').on('change', '#txtbxhost',  function() {
   // fails everytime           
});

and

$(document).on('change', '#txtbxhost',  function() {
   // fails everytime           
});

i'm out of ideas here ... help ...

• javascript
• jquery

• is #txtbxhost the actual input? – Mike Brant Commented Jun 13, 2013 at 23:12
• 1 Why are you using .live at all if the element already exists? – Felix Kling Commented Jun 13, 2013 at 23:15
• Mike Brant yes it is the input - @Felix Kling im migrating the script as it was written i know .live() is not good to use hence moving to .on() – user962902 Commented Jun 13, 2013 at 23:29
• You only need event delegation if the you add the element dynamically. But you said the element already exists. So you don't have to use event delegation and try to convert the .live version to the equivalent .on version. Just bind the handler directly to the element with .on. The documentation has a lot of information and examples: api.jquery./on. – Felix Kling Commented Jun 13, 2013 at 23:32

3 Answers 3

You probably want:

$(document).on('input', '#txtbxhost',  function() {
   // code here           
});

Check this fiddle

Also, change works only when you blur - In other words click elsewhere after you change text in the texbox.

So, this should work too

$(document).on('change', '#txtbxhost',  function() {
   // fails everytime           
});

Check the updated fiddle

You need to understand how on() differs in behavior to live().

There are really two main approaches to using on(). If the element you are interested in exists on the page at load, you can consider directly binding the event like this:

$('#txtbxhost').on('input', function () {
    // some function
});

This would work in much the same way as change() would.

If the element may not exist at page load then you need to work with delegated events. To do this, you must attach the on() to an element that does exist at page load. This can be document or would typically be the closest ancestor to the element the you are interested in that exists on page load. This delegation works by looking at the event bubbling up the DOM element stack to the element to which you bind on(), you then look for a selector within that element to apply the callback to. This looks like this:

$('#some_static_ancestor').on('input', '#txtbxhost', function () {
    // some function
});

$(function(){
    $('#txtbxhost').on('input', function() {
       // do stuff   
    });
});

That should do it.

In your case you don't really need to use .on(), it's main purpose is to deal with dynamically created elements.