jQuery: binding to the "load" event of images that are dynamically loaded into JavaScript.

Question

So I have some code that uses JavaScript templates to create some HTML, including some <img /> tags. For our purposes, it looks like this:

$("myButton").click(function() { $("myDiv").html(
    'lots of html included <img class="A" /> tags');

Now, I'd like to have a method that replaces all <img /> that have class="A" with a <div /> with appropriate background-images and the like. (This is a hack to use border-radius to make square images into round ones.) This method looks roughly like this:

function replaceA()
{
    var imageUri = $(this).attr("src");
    $(this).replaceWith('<div class="B" style="background-image: url(' + imageUri + ')"></div>');
}

But here's the catch. I want to run this method on all img.As, no matter how they show up on my site---whether in the HTML, or inserted through a template method like the above, or even loaded with Ajax $("myDiv").load(...). And this appears to be nontrivial, since even with $(".A").live(...), the event handler never gets fired. In short, the following code does not work:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<div id="MyDiv"></div>
<script>
    $(".A").live("load", function ()
    {
        alert(this);
    });

    $("#MyDiv").html('stuff <img class="A" src="http://code.google.com/images/code_logo.png" /> more stuff');
</script>

Any ideas as to how I can perform this trick?

Answer 1

You'll need to use DOM mutation events . This (untested) JQuery plugin may also be of some use.

Answer 2

try this...

<div id="MyDiv">
<button type="button" id="button">Add Image</button>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$('#button').click(function(){
    $('#MyDiv').append('<p>new image: <img class="newimage"  src="http://code.google.com/images/code_logo.png" /></p>');

    $('.newimage').each(function(){
        alert('ready??'); //comment out when ready
        var imageUri = $(this).attr('src');
        $(this).replaceWith('<div class="B" style="display:block; width:200px; height:50px; border:1px solid red; background-image: url(' + imageUri + ')"></div>');
    });
});
</script>

Answer 3

To be honest, I didn't think your question was written very clearly but I decided to try to help anyways. How about this...

<div id="MyDiv">
<p>original image: <img class="A"  src="http://code.google.com/images/code_logo.png" /></p>
<button type="button" id="button">Add Image</button>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$('#button').click(function(){
    $('#MyDiv').append('<p>new image: <img class="A"  src="http://code.google.com/images/code_logo.png" /></p>');
});

function replaceA(){
    $('.A').each(function(){
        var imageUri = $(this).attr('src');
        $(this).replaceWith('<div class="B" style="display:block; width:200px; height:50px; border:1px solid red; background-image: url(' + imageUri + ')"></div>');
    });
}

var int = self.setInterval('replaceA()',100);
</script>