CODEWITHSUNDEEP
jquery
djburdick
djburdick

Reputation: 11940

jquery .live on load event

I need a way to use the jquery .live() function to act on elements that are loaded via ajax.

For instance a div is loaded via ajax .load()

<div id="mydiv"></div>

Normally I do .live() with a click event, but I need to know how to tell the dom that this new div has loaded without any explicit actions/events from the user.

This code doesn't work, but I want to do something like this:

mydiv = $("#mydiv");

mydiv.live("mydiv.length > 0", function() {
       // do something
});

The "mydiv.length" being a substitue for the typical "click" or other event.

Upvotes: 16

Views: 36726

Answers (9)

Vijay
Vijay

Reputation: 365

Yap, it is still little expensive. But you can try this:

$(document).ready(function(){
    $(document).bind('DOMSubtreeModified', function() {
       if($("#mydiv").length > 0){
         //Here goes your code after div load
       }
    });
});

Upvotes: 0

Siddharth
Siddharth

Reputation: 869

.live does not work with ready end load event as stated in jquery 1.3 documentation you cannot use load and ready event with live visit http://api.jquery.com/live/ for more information,

Upvotes: 0

motorfirebox
motorfirebox

Reputation: 65

What creates #mydiv? You should be able to simply throw //doSomething right alongside the function that creates #mydiv.

$.post("myURL.html", function(data){
  $("#mydiv").html(data);
  //doSomething

#mydiv doesn't create itself, after all. However you're creating #mydiv, use that same function to do whatever else you need to do.

Upvotes: 2

bcherry
bcherry

Reputation: 7238

You can't use .live() with the "load" event. See a non-working example of what you'd like to do here: http://www.jsfiddle.net/S5L6Q/

One approach is to poll with a timer:

var length = $(".mydiv").length;
setInterval(function () {
  if ($(".mydiv").length > length) {
    length = $(".mydiv").length;
    // .. some code
  }
}, 100);

This will check every 1/10th of a second to see if some have been added. This might be really expensive depending on the complexity of your selector.

Another option is to hook all of your AJAX calls through a common wrapper that can check the length and executes your code if needed, then executes the supplied callback.

function myAjax(url, data, callback) {
  function fullCallback(data) {
    if ($(".mydiv").length > 0) {
      //... your code...
    }
    if (callback) {
      callback();
    }
  }
  $.get(url, data, fullCallback);
};

The second one is probably the best route, but the first might be easiest.

Upvotes: 2

Sean Vieira
Sean Vieira

Reputation: 159995

Another way to do this would be to use trigger() to trigger your own custom event (let's call it content_loaded). load() takes a callback function it calls on completion:

function callback_function(responseText, textStatus, XMLHttpRequest) {
    //if we have valid data ...
    trigger("content_loaded");
}

$("your_selector").load("your_url", callback_function);

And then just set up an event listener and run it whenever your event is fired.

$("your_selector").bind("content_loaded", your_results_loaded_function);

Upvotes: 11

tvanfosson
tvanfosson

Reputation: 532555

Typically I would handle any actions that occur when the element is loaded either as part of the AJAX callback mechanism or as part of a ready handler that is included in the returned HTML of the AJAX success callback. The later works well when you want to load a partial view onto the page and want to keep the code with the partial view itself.

Partial View:

<div id="myDiv">
  ...
</div>

<script type="text/javascript">
   $(function() {
       $('#myDiv').somePlugin( ... );
   });
</script>

Using the callback

$.ajax({
   url: '/example.com/code.php',
   success: function(html) {
          var container = $('#container').html(html);
          $('#myDiv',container).somePlugin( ... );
   }
});

Upvotes: 1

PetersenDidIt
PetersenDidIt

Reputation: 25620

There isn't a "DOM changed" event and creating one is taxing on the browser. You are best off using the callback for the load method to trigger the functions you need to.

$('#foobar').load('myurl.html',function() {
    var mydiv = $("#mydiv");
});

Upvotes: 10

CResults
CResults

Reputation: 5105

For example (expanding on my comment above) this is from the jQuery docs..

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('#mydiv').html(data);
    alert('Load was performed.');
  }
});

replace the alert with the code you want to run/action you wish to perform

Upvotes: 1

Bradford
Bradford

Reputation: 4193

Have you seen this yet: http://plugins.jquery.com/project/livequery/

Upvotes: 3

Related Questions