代码之家 › 专栏 › 技术社区 › Domenic

jQuery:绑定到动态加载到JavaScript中的图像的“load”事件

javascript-events jquery

Domenic · 技术社区 · 14 年前

所以我有一些代码使用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 $("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>

你有什么办法让我表演这个把戏吗?

3 回复 | 直到 14 年前

Community CDub 5 年前

你需要使用 DOM mutation events JQuery plugin 也可能有用。

Erick Hoppe 14 年前

老实说,我认为你的问题写得不太清楚,但我还是决定尽力帮忙。这个怎么样。。。

<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>

-1

Erick Hoppe 14 年前

试试这个。。。

<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>