Question

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, this code doesn’t use any. It just works once the page loaded and then stops. Should work also for ajaxified content.

Answer 1

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();
});