.live vs .delegate

JavaScript
1

Based on a recommendation from people a lot smarter than me, I tried delegate and am evidently doing something wrong because it is not working as intended. I have a situation where I am refreshing data with ajax and want my click and other events to be attached to the refreshed data as well as the original page data.

With the code below, .live works great, going from page to page. But when I use the delegate in it’s place, it works on the loaded page, but not on the subsequent agax refreshed data. Am I doing something wrong?


$('.likegrp .likes a, .likegrp .dislikes a, .likegrp .follow a').live('click', function(e) { 



$('.likegrp .likes, .likegrp .dislikes, .likegrp .follow').delegate('a', 'click', function(e) {
2

Glad to see you figured it out! :slight_smile:

The create function would need to be called whenever you inject new content, so indeed inside of the delegate callback would be the best place for it.

3

Thanks, one of those aha moments. Not sure I understand the function side but let me play with it and see if I can get it.

Rather than erase, another aha moment so I went and put the call inside the delegate and it works like a champ. Thanks so much for the help.

4

Maybe a different way to ask the question is how do you know how far up the tree to go in any situation with selectors? I assume you only need to go far enough to uniquely identify the object. So if I have an ‘a’ and a class parent that uniquely identifies that ‘a’ but both are being replaced with the ajax data, do I need all the intermediary selectors on the way up to get the one that doesn’t change?

Or do I put all the selectors that change on the right side of the argument. ahhhhhh let me try that. :slight_smile:

5

That did it. I put the selector that doesn’t change on the left and the identifying selectors on the right side of the argument and it works great. Now it makes perfect sense. Thanks again for the help. :slight_smile:

6

Are the elements you are targeting in the delegate call themselves being refreshed?

Delegate should be placed on the parent of any element that is being refreshed. E.g.


$("#maincontent, #sidebar").delegate(".like a, .rating a", "click", funtion(e) {
7

I have tried it both ways. I replace pretty large chunks of the page, so if I go up, do I need all elements between the closest one that doesn’t get changed and the one I am acting on even if there are multiple events in between? Or can I just select the top one and then enough under that to identify it? Does that make sense.

I was doing some reading and came across a statement that sounded like what you are saying. Does .live work differently in that sense because live works fine with those tags?

Also, did you see my other question on the post the other day about the create: function that wasn’t attaching after I changed data? Is that something that I would do with delegate also? Sorry for crossing two posts but still don’t have an answer to that one. :slight_smile:

I really appreciate the help.