jquery live works, on does not

[McLaren]

//$('tr[id^=system_type_] input').live('change', function() {
    $('tr[id^=system_type_] input').on('change', function() {
        alert('a');
        console.log($(this).val());
    });

its not the first time, but I read that live is deprecated so I want to use on. But why it does not work in this code?

[AleMonteiro]

on() is not the same as live().

live() is used to attach handlers to an selector. If an element is created after the call of live() it would have the same handler.

on() only attach handler to existing elements. If you create an element after the call of on(), it will not have the handler attached to the event

[McLaren]

so you say on replaces something like this:

$('tr[id^=system_type_] input').change( function() {
        alert('a');
        console.log($(this).val());
    });

 $('tr[id^=system_type_] input').on('change', function() {
        alert('a');
        console.log($(this).val());
    });

But as was written live is deprecated, use on instead. So how should I use it?

[AleMonteiro]

Yes, .on('change') is the same as .change()

This is from api.jquery.com: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

You should call .on('change') after inserting new elements. And you should call .off('change') to prevent add double handlers.

$('tr[id^=system_type_] input')
    .off('change')
    .on('change', function() {
        alert('a');
        console.log($(this).val());
    });

[stbuchok]

You can have on work like live by doing the following:

$('tr[id^=system_type_]').on('change', 'input', function() {
    alert('a');
    console.log($(this).val());
});

so if input elements are dynamically being added to what ever element this is tr[id^=system_type_] then it will work. However it looks like you are adding rows, so the following should work better:

$('table').on('change', 'tr[id^=system_type_] input', function() {
    alert('a');
    console.log($(this).val());
});

Pretty sure this should work ;)

[McLaren]

I remember this syntax even when on method was not yet in jquery, but I did not use it so I fully don't understand but it works, so thats ok, thanks :)

I looks like it now listers for all tables where row with this id beggining changes.

[McLaren]

$('.cancel_ticket').live('click', function() { // WAR live deprecated

$('document').on('click', 'input.cancel_ticket', function() {

Again not understanding. Can you exmplain why it does not work? I even added input before .cancel_ticket but does not help.

And I don't get why they made it more harder than earlier :(

Or if .on is not replacement for live - then why they removed live? What we have to use instead of it?

[dcdruck]

As AleMonteiro said above, .on() is not a direct replacement for .live() because for .on() to work the element(s) must exist at the time .on() is called. See jQuery.on API documentation for more details on getting .on() to behave sort of like .live().

In your previous post, if input.cancel_live already exists when you are calling on, you can just do:

$('input.cancel_ticket').on('click', function() { /* click handler code */ });

[stbuchok]

Please read the documentation in order to understand how you can get it to work as live did.

"Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time."

$(document).on('click', 'input.cancel_ticket', function() { /* click handler code */ });

because document is always going to exist, any child elements that are inputs with a class of cancel_ticket will then fire a click event when clicked, even if added later.

$(parent selector).on(event, child selector, function)

so all elements matching the child selector that are descendants of the element for the parent selector will have the event. The only one that needs to be present and rendered on the page when this gets created in the element that matches the parent selector.

In your example, you have $('docment'), it should be $(document) - no quotes. You can also use any element that would be an ancestor to input.cancel_ticket.

[paulkd]

Are you able to provide the HTML code?

[McLaren]

with

$(document).on

it works. So thanks.

ANd I read documentation few times but did not understand. Ok, next time I will read this thread and doc again when I need this to work :)

[paulkd]

Potentially that's a very large selection.