jQuery on() with ajaxed content

Question

I am trying to bind click handlers to incoming ajaxed content. I used to use 'live'

   $('#div').live('click', function(event) {
        alert('I got clicked, Live style'); 
   });

But now as my site is getting more complicated, I am realizing how crazy things can get using live and having everything bubble to the top of the DOM. Which is not ideal.

So I started using on(),

   $('#div').on('click', function(event) {
        alert('I got clicked, On style');   
   });

But I miss the fact that using live() I could just initialize the click handlers once and be done with it instead of reinitialize them every time new content is loaded. Is there a best of both worlds?

Is there a better way to "reload" click handlers to recognize new ajax content aside from creating the handlers in the ajax callback function? To me that seems highly suspect. Whats the appropriate way to do this?

What is the new content you want to click on?

papaiatis
– papaiatis

2012-02-23 17:51:47 +00:00
Commented Feb 23, 2012 at 17:51 — papaiatis
– papaiatis, Commented Feb 23, 2012 at 17:51

DarthJDG · Accepted Answer · 2012-02-23 18:13:10Z

8

As of jQuery 1.7 the following .on() event binding is equivalent to the deprecated live:

$(document).on('click', '#div', function(event) {
    alert('I got clicked, On style');
});

You can also bind the event to some fixed element further down the DOM which doesn't get re-generated, this functionality would be the same as .delegate():

$('#parentofdiv').on('click', '#div', function(event) {
    alert('I got clicked, On style');
});

It is advisable to use the second form to narrow down the scope of the event binding as much as possible to make it easier to maintain.

Edit: For the record, what you originally did in your post would be the preferred replacement for your .bind() calls in your code.

edited Feb 23, 2012 at 18:13

answered Feb 23, 2012 at 17:53

DarthJDG

16.6k11 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bot · Accepted Answer · 2012-02-23 17:53:43Z

0

Have you looked at using .delegate? http://api.jquery.com/delegate/

answered Feb 23, 2012 at 17:53

Bot

11.9k11 gold badges78 silver badges134 bronze badges

Comments

gdoron · Accepted Answer · 2012-02-23 17:56:12Z

0

jQuery's on() method can be used to attach various events to already existing items as well as items added by ajax calls to the DOM in the future:

$(document).on("click", ".ajax-added-content", function(event) {
   alert('I got clicked, On style');   
});

edited Feb 23, 2012 at 17:56

gdoron

151k59 gold badges302 silver badges376 bronze badges

answered Feb 23, 2012 at 17:52

papaiatis

4,3114 gold badges28 silver badges39 bronze badges

1 Comment

gdoron Over a year ago

I'll use it but I will attach the event to the closest element of the dynamic elements. see @DarthJDG answer.

Mike · Accepted Answer · 2012-02-23 17:56:30Z

-1

It is possible to do what you want with

.on()

and it is actually the recommended method.

.live()

is deprecated as of jquery 1.7.

You can attach your event to the body and use this overload of "on" to get the functionality you desire. Check the next to last example in jquery's doco of .on

$("body").on("click", "#div", function(){
      alert('I got clicked, On style');
});

answered Feb 23, 2012 at 17:56

Mike

6534 silver badges8 bronze badges

Collectives™ on Stack Overflow

jQuery on() with ajaxed content

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related