jQuery .on does not work but .live does

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?

Leave a Comment