Javascript 等待脚本添加元素

我有一个简单的js代码，它加载xml并向页面添加一个图像。在代码的底部是一个函数，当你点击一个图像时，它会弹出一个警报。我在html中添加了一个图像，因此有两个图像。我的问题是，警报针对的是html中添加的图像，而不是js/xml中添加的图像。我认为问题在于，在第二张图像加载到html之前，点击功能被点击了？？这就是问题所在吗？如果不是，请告诉我如何解决这个问题。谢谢

您可以在此处看到两幅图像：

HTML

JS

//加载XML
$.ajax({
url:'data.xml'，//要分析的文件名
数据类型：“xml”，
成功：解析，
错误：函数（）{alert（“错误：XML有问题”）；}
});
函数解析（文档）{
$（文档）。查找（“样例”）。每个（函数（）{
$（“.Fabric”）.append(
''
);
}); 
}//函数解析结束
$（文档）.ready（函数（）{
$（“.Fabric img”）。单击（函数（）{
警报（“点击图像”）；
});
}); //准备好了吗

因为您使用的是动态元素，所以请使用事件增量模型来注册事件处理程序

如果

.Fabric

是dom加载时存在的静态元素，则可以使用

$('.Fabric').on('click', 'img', function () {
        alert("image clicked");
});

---

因为您使用的是动态元素，所以请使用事件增量模型来注册事件处理程序

如果

.Fabric

是dom加载时存在的静态元素，则可以使用

$('.Fabric').on('click', 'img', function () {
        alert("image clicked");
});

用于在动态添加的元素上绑定事件

将事件绑定到

文档

或加载时已在页面上的容器上

样本：

$(document).on('click', '.Fabric img', function(){
        alert("image clicked");
});

用于在动态添加的元素上绑定事件

将事件绑定到

文档

或加载时已在页面上的容器上

样本：

$(document).on('click', '.Fabric img', function(){
        alert("image clicked");
});

jQuery的

on（）

将允许您通过冒泡监听事件

最好是在更近的层次上听，而不是在文档中

改变

$(".Fabric img").click(function () {
        alert("image clicked");
});

到

jQuery的

on（）

将允许您通过冒泡监听事件

最好是在更近的层次上听，而不是在文档中

改变

$(".Fabric img").click(function () {
        alert("image clicked");
});

到

函数解析（文档）{
$（文档）。查找（“样例”）。每个（函数（）{
$（“.Fabric”）.append(
''
);
}); 
}

改为：

function parse(document){
 $(document).find("Swatch").each(function(){
    var _image = '<img class="' + $(this).attr('name') + '" alt="' +     $(this).attr('alt') + '"  title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.jpg">';
    $(".Fabric").append(_image);
    _image.click(function(){
            alert('Clicked me !');
          });

    );
 }); 
}

函数解析（文档）{
$（文档）。查找（“样例”）。每个（函数（）{
var_image=''；
$（“.Fabric”）.append（_图像）；
_image.click（函数（）{
警惕（“点击我！”）；
});
);
}); 
}

函数解析（文档）{
$（文档）。查找（“样例”）。每个（函数（）{
$（“.Fabric”）.append(
''
);
}); 
}

改为：

function parse(document){
 $(document).find("Swatch").each(function(){
    var _image = '<img class="' + $(this).attr('name') + '" alt="' +     $(this).attr('alt') + '"  title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.jpg">';
    $(".Fabric").append(_image);
    _image.click(function(){
            alert('Clicked me !');
          });

    );
 }); 
}

函数解析（文档）{
$（文档）。查找（“样例”）。每个（函数（）{
var_image=''；
$（“.Fabric”）.append（_图像）；
_image.click（函数（）{
警惕（“点击我！”）；
});
);
}); 
}

function parse(document){
 $(document).find("Swatch").each(function(){
    var _image = '<img class="' + $(this).attr('name') + '" alt="' +     $(this).attr('alt') + '"  title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.jpg">';
    $(".Fabric").append(_image);
    _image.click(function(){
            alert('Clicked me !');
          });

    );
 }); 
}