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

ar7v8xwq 于 2022-12-18 发布在 jQuery

关注(0)|答案(3)|浏览(143)

我有一些代码使用JavaScript模板来创建一些HTML，包括一些<img />标签。

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

现在，我希望有一个方法，用一个带有适当背景图像的<div />替换所有带有class="A"的<img />（这是一个使用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>

型
你知道我该怎么表演这个魔术吗？

jquery

来源：https://stackoverflow.com/questions/3687253/binding-to-the-load-event-of-images-that-are-dynamically-loaded-into-javascrip

3条答案

按热度按时间

zpqajqem1#

你需要使用DOM mutation events，这个（未经测试的）JQuery plugin可能也有一些用处。

赞(0）回复(0）举报 2022-12-18

xlpyo6sf2#

老实说，我不认为你的问题写得很清楚，但我还是决定试着帮忙。这样如何...

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

赞(0）回复(0）举报 2022-12-18

7fhtutme3#

试试这个...

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

赞(0）回复(0）举报 2022-12-18

我来回答

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

3条答案

相关问题

热门标签

最新问答