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

但这是抓住了。我希望在所有$("myDiv").load(...)上运行此方法，无论它们如何出现在我的网站上 - 无论是在HTML中，还是通过上面的模板方法插入，或者甚至加载了Ajax {{1 }}。这看起来并不重要，因为即使使用$(".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

您需要使用DOM mutation events 。这个（未经测试的）JQuery plugin也可能有用。

Answer 2

老实说，我认为你的问题写得不是很清楚，但我还是决定尝试提供帮助。怎么样......

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

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

3 个答案: