1

I have content that is loaded from an ajax call but i want to bind a custom method (not an event) to the dom elements to achieve some functionality.

Most of the solutions i find online are binding events to the page like 

$(".example").ajax({
  'success': function(data) {
     something()
  }
})

I want to achieve something like 'on load of the content' because there is no event there.. 

$('.post').live('load', function() {
       .....
    });
Praneeth
  • 2,527
  • 5
  • 30
  • 47

6 Answers6

2

Consider .ajaxComplete.

http://api.jquery.com/ajaxComplete/

For example:

// Normally you have an anonymous function. Make it a named function.
function myInitialize(scope) {
    $('.button', scope).button();
}

// Call it in document ready to initialize stuff that loaded in the page.
$(myInitialize(null));

// Call it again in .ajaxComplete
// 'this' is the div that loaded or has new content.
$('*').ajaxComplete(myInitialize(this));
Craig Celeste
  • 12,207
  • 10
  • 42
  • 49
1

1) put all your bind functions in a function...

2) now call this function inside the $(document).load() and as well as the success function of the ajax via which you are adding the html to the DOM

NOTE* - Calling this function inside the Success method is necessary because ajax is synchronous and success method is called only after the response comes therefor these functions will get binded if called after the addition of html to the DOM

Ashish Khurana - J3rry
  • 31
  • 1
0

According to the documentation:

.live( eventType, eventData, handler )

eventTypeA string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names, as well.

eventDataA map of data that will be passed to the event handler.

handlerA function to execute at the time the event is triggered.

So you should do it. I don't know why isn't working. I invite you to check this old answer.

How to make live custom events in jQuery

I hope it helps!

Community
  • 1
  • 1
Fran Verona
  • 5,438
  • 6
  • 46
  • 85
  • It doesn't work because the OP doesn't have any events that are being triggered. It's a custom function -- a plugin, I'd guess. – lonesomeday Jan 25 '11 at 18:26
  • I dont have any events what i have is only method so i want to bind that method...please read my question properly. – Praneeth Jan 25 '11 at 18:34
0

you can use live to accomplish this if you have an event to bind this action to (like onclick)... if not, try livequery, which allows you to bind just an action when an element appears (nobody has to click anywhere for the action to fire)

Zathrus Writer
  • 4,311
  • 5
  • 27
  • 50
  • -1 (sorry) I went down this road with some regret. Livequery essentially binds all bindable events and re-checks the whole DOM on every event, looking for new elements that match the live query. For small pages, it works. Our pages had large amounts of tabular data and it killed performance. – Craig Celeste Jan 27 '11 at 14:47
  • thanks for pointing this out - do you have more information (paper, benchmark, website), so I can study the behavior a bit more? – Zathrus Writer Jan 27 '11 at 14:57
  • I wish I did, I'm sorry. My comment is anecdotal only. We used livequery last summer to identify elements that got added to a largeish grid on the fly. We found that once the grid got to be hundreds of lines long, there would be delays of up to 1 second long when you clicked on things, or did other unrelated events. This happened mainly in IE6 and IE7, which our clients are forced to use. Instead of 'magically' applying behaviors when things get added to the DOM, we opted to trigger custom events when we manipulate the dom to allow our widgets to hook up. http://api.jquery.com/trigger/ – Craig Celeste Jan 27 '11 at 22:37
  • thanks again for the insight... I've opened a new question and found out that you are probably right, to an extent... here's the link: http://stackoverflow.com/questions/4818020/livequery-performance – Zathrus Writer Jan 28 '11 at 18:52
0

from my past 2 days experience, I have learned that there are multiple ways to implement the functionality you need

the fastest way would probably be to simply handle the data you need using a custom function that will be called just before (or right after) you get that content via AJAX and insert it into the DOM

$.ajax({
    success: function(data) {
        // do anything with data here
        data = $(data).find('#my_div').addClass('red');
        $('#element').append(data);
        // OR - do the neccessary amendments here
        $('#my_div').addClass('red');
    }
});

the easier (but maybe slower) way could be to still use livequery in order to manipulate the object you need - however, this approach can be dead slow when set up incorrectly

$('#my_div').livequery(function() {
    $(this).addClass('red');
});

I would suggest reading some of the links I got when asking about live and livequery performance here

Community
  • 1
  • 1
Zathrus Writer
  • 4,311
  • 5
  • 27
  • 50
0

I ran into trouble with the Parched's ajaxComplete approach, in consistently and generally providing it with the proper target to apply the behavior to (e.g. AFAICT xhr.responseText isn't a part of the document, so it can't be bound to), so I came up with this alternate approach, which may be helpful.

In all my ajax calls I use the complete: event to trigger a known event on the new html's destination. E.g. the facebox container or the pjax destination.

// in my facebox ajax setup
$.ajax({
  ...,
  complete: function() {
    $('#facebox').trigger('end.facebox');
  }
}

Then separately I react to this event.

$('*').live('end.facebox', function(e) {
  if (e.target == this) {
    apply_behavior(this); // in the style of Parched Squid's myInitialize
  }
});

I'd love to hear suggestions/improvements, but this seems general enough to consistently accommodate multiple ajax approaches/event types and destinations.

Empact
  • 462
  • 6
  • 6