CODEWITHSUNDEEP
jquery
Jagd
Jagd

Reputation: 7306

jQuery .on does not work but .live does

Since the live() method is deprecated as of version 1.7, I started going through my source and converting all of my live event handlers over to on(). I was under the impression that the change would be simple and everything would work as it had before; however, I ran into some code that doesn't behave as it should.

I have the following jQuery select to bind the click event of a table tag...

$('table.accordion-header').live("click", function ($e) {
  // gobs of code
}

... and it works just fine (ie - my table tag click event is raised even after asynchronous postbacks on the page occur). But if I change the code to the following

$('table.accordion-header').on("click", function ($e) {
  // gobs of code
}

then the click event is no longer raised after any asynchronous postbacks on the page occur. Please note - the click event does work up to any asynchronous postbacks, but afterwards it no longer works. So what am I missing here?

Upvotes: 25

Views: 17038

Answers (6)

Jason Is My Name
Jason Is My Name

Reputation: 939

After wasting a very large amount of time on this problem I figured out that there was in fact two search forms on my page, both of which using the same ID.

The solution was to add a class name to the form so I can target them collectively and use an .each() on the class to target them individually.

Upvotes: 0

hackdotslashdotkill
hackdotslashdotkill

Reputation: 40

Best way I can put this is just like the documentation says from jQuery on .live() and .on() functionality:

  1. In your selector "$(selector)" throw in a concrete element that loads with the page - not dynamically.
  2. Then place the secondary selector into the method where "selector" is indicated - this one CAN be dynamically created. 
//so this..
    $('table.accordion-header').live("click", function ($e) {
  // gobs of code
});

//becomes this..   
    $('table').on("click",'.accordion-header', function ($e) {
  // gobs of code
});

Assuming that "table" is loaded with the page of course.

Upvotes: 0

Chris Smith
Chris Smith

Reputation: 480

I had trouble with trying to update my live() to on() too but finally got it when somebody showed me how the first parent or context selector works. The key is making sure that this first element is in the Document Object Model.

The way $(this) works with .on() is not obvious either.

$(document).on("click", 'table.accordion-header', function ($e) {
  // gobs of code
} );

In the example given above $(this) in your function code would refer to $('table.accordion-header') and not $(document) as you might expect.

Further explanation here: .on() with $(this)

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

The equivalent to

$('table.accordion-header').live("click", function ($e) {
  // gobs of code
} );

is

$(document).on("click", 'table.accordion-header', function ($e) {
  // gobs of code
} );

Upvotes: 48

jfriend00
jfriend00

Reputation: 707258

Questions like this have been answered many, many times as it seems fairly common that people don't quite understand how the dynamic version of .on() works. You are using the static form of .on() where the object must exist at the time you call .on() when you probably intend to be using the dynamic form of .on() like this:

$(someStaticParentObject).on("click", 'table.accordion-header', function ($e) {
  // code
}

.live() was replaced with .on() because .on() allows you to have better performance by specifying a static parent object of the dynamic object to attach the event handler to that is more efficient that attaching it to the document object which is what .live() did. I would suggest you read these previous answers (all written by me) to understand more about how to best use .on(). These answers also include comments about the most efficient way to use .on() and a brief description of how it works:

jquery: on vs live

Does jQuery.on() work for elements that are added after the event handler is created?

How does jQuery's new on() method compare to the live() method in performance?

What's the difference between jQuery.bind() and jQuery.on()?

Why not take Javascript event delegation to the extreme?

Upvotes: 54

Dennis Rongo
Dennis Rongo

Reputation: 4611

In the jQuery 1.7.2 source, "live" is pretty much pointing to "on" so this issue is probably not related to the "on" function. This needs to be ruled out. The selector for on might be an issue.

jQuery source: 

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},

Upvotes: 0

Related Questions