jQuery: привязка к событию «load» изображений, которые динамически загружаются в JavaScript

Question

Итак, у меня есть некоторый код, который использует шаблоны JavaScript для создания некоторого HTML, включая некоторые <img /> теги.Для наших целей это выглядит так:

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

Теперь я хотел бы иметь метод, который заменяет все <img />, которые имеют class="A", на <div /> с соответствующими фоновыми изображениями иподобное, аналогичное, похожее.(Это хак, чтобы использовать border-radius, чтобы превратить квадратные изображения в круглые.) Этот метод выглядит примерно так:

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

Но здесь есть одна загвоздка.Я хочу запустить этот метод на всех img.A с, независимо от того, как они отображаются на моем сайте - будь то в HTML, или вставлены с помощью метода шаблона, как описано выше, или даже загружены с Ajax $("myDiv").load(...).И это кажется нетривиальным, поскольку даже с $(".A").live(...) обработчик событий никогда не запускается.Короче говоря, следующий код не работает:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<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>

Есть какие-нибудь идеи относительно того, как я могу выполнить этот трюк?

Answer 1

Если честно, я не думаю, что ваш вопрос написан очень четко, но я решил попытаться помочь в любом случае.Как насчет этого ...

<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"></script>
<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>

Answer 2

Вам нужно будет использовать события мутации DOM .Этот (не проверенный) плагин JQuery также может быть полезен.

Answer 3

попробуйте это ...

<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"></script>
<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>