jQuery on() not working properly

Question

Good day. Recently i've started learning jQuery and i'm quite green when it comes to developing in jQuery.

I have the following issue with .on() event. I've already searched stack overflow for answers but I haven't found any working solution for my case. I have the following code:

$('input.a').on('click',function(){
    $(this).after('<input class="a" type="button" value="click me">');
});

This function works fine, but the buttons which are generated do nothing when I click on them. I am supposed to use .live(); event but as I'm using jQuery 1.10.2 this event is deprecated. After visiting jQuery documentation I've found that I am supposed to be using .on() the following way

$('input.a').on('click','input.a',function(){
    $(this).after('<input class="a" type="button" value="click me">');
});

But once I do, the whole function stops working (I assume, as I'm not getting any feedback), but there are no error's in developer's console too. Am I doing something wrong, or is there any other replacements for the .live() event?

This part is incorrect: `$('input.a')` when using `.on`, you need to select an element that *contains* the targeted elements, for example, the document or the form that contains the inputs. — Kevin B, Dec 17 '13 at 16:14
and [Turning live() into on() in jQuery](http://stackoverflow.com/q/8021436/218196). — Felix Kling, Dec 17 '13 at 16:26

score 8 · Answer 1 · answered Dec 17 '13 at 16:13

You need to bind the handler to an already existing element, in your case you are binding the handler to the input element itself... instead bind it to an ancestor element of all the target input elements(like the document, body etc) which exists in the document on dom ready

$(document).on('click','input.a',function(){
    $(this).after('<input class="a" type="button" value="click me">');
});

score 3 · Answer 2 · answered Dec 17 '13 at 16:13

3

To use event delegation you must bind it to the closest static parent element like this

$(document).on('click','input.a',function(){
    $(this).after('<input class="a" type="button" value="click me">');
});

answered Dec 17 '13 at 16:13

Anton

30,499
5
42
54

Out of curiosity, why do you specify the "closest" parent, as opposed to `body` or `document`? As a matter of personal preference, I concentrate my event delegations in a designated object container in large applications, or on `body` in one-off apps. – Palpatim Dec 17 '13 at 16:21

bdukes · Answer 3 · 2013-12-17T16:18:54.363

The replacement for $(selector).live(eventName, handler) is $(document).on(eventName, selector, handler).

Under the covers, live is using event delegation, meaning that it handles the event when it bubbles up higher in the DOM tree, specifically when it bubbles up to the top of the DOM tree to the document element. So, to create that same experience, you bind a handler to the document using on and then pass in a selector as the 2nd argument, to indicate that you only want to handle events where the original target matched that selector.

Because you're in control of this scenario more than with live, you can also choose to bind to a different element in the DOM tree, if that makes sense. So, instead of binding to document, you can bind just to the container that holds your dynamically created elements (e.g. $('.inputWrap').on('click', 'input.a', function (event) { /* ... */ }).

jQuery on() not working properly

3 Answers3