Do something with ajaxified content (jQuery)

HTML:

<div>
<img src="image.png" />
</div>

JS:

$("div img").animate({opacity:.5}, 200);

This js works good once page is loaded. But doesn't handle content loaded by ajax. Given js code is just an example.

The question is, how to make some js code work for ajaxified content?

---

Have tryed this way:

function loadDone(){
    $("div img").animate({opacity:.5}, 200);
};

loadDone();

$.ajax({
    url: "test.html",
    success: function(){
        //do something
        loadDone();
    }
});

But it doesn't work.

I know how to add triggers, the problem is,开发者_JS百科 this code doesn't use any. It just works once the page loaded and then stops. Should work also for ajaxified content.

---

Your question is a little vague, but this might help.

Assuming you run this code on document ready:

$(function() { 
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
});

You could repeat this call in a ajax callback:

$("#some_div").load("/html_fragment_with_cool_image", function() { 
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
});

Or, go a step further and wrap it in a function.

function doDivStuff() {
  if ($("div img").width() > $("div").width()){
    $("div img").css({"width": $("div").width()});
  }
}

And then call it when you need to.

$(function() { 
  doDivStuff();
});

$("#some_div").load("/html_fragment_with_cool_image", function() { 
  doDivStuff();
});

---

Not sure if I understand your question but you have to run your JS after the ajax content is loaded into the DOM of the current page.

Just do it on the ajax onsucess callback (jquery)

---

For events you can use the live command rather than bind. This will make the events fire on content loaded via ajax.

For code like your example you would need to run that code after you have loaded any HTML via ajax. Usually this would be from the success callback of the ajax call.

---

Depends on where you're calling this code from.

Your Ajax call will have a call-back. Just call this code from that.

$(document).ready(function() {
  //call the method when the page loads
  setImageWidth();
}

function setImageWidth() {
  if ($("div img").width() > $("div").width()){
      $("div img").css({"width": $("div").width()});
  }
}

function doSomeAjax() {
  $.ajax({
    type : "GET",
    url : 'http://somepath',
    success :
    // Call the method when receive successful response
    function(response) {
        setImageWidth();
     }
  });
} 

---

You would probably need to execute the same function to fix the img width after Ajax calls. You might also consider putting a class (or data) on the modified img and filtering against the class on subsequent calls to the resize function.

var resizeImages = function() { 
    if ($("div img").width() > $("div").width()){
        $("div img").css({"width": $("div").width()});
    }
}

//You could use the global event callback or 
//attach to the individual ajax requests that you know will add images
$(document.body).ajaxSuccess(resizeImages);