Question

我有这个简单的js代码加载xml并向页面添加图像。在代码的底部是一个功能，当您单击图像时会弹出警报。我有一个在html中添加的图像，因此有两个图像。我的问题是警报会触发在html中添加的图像，但不会触发由js / xml添加的图像。我认为问题是在第二个图像加载到html之前点击了click函数？这是问题吗？如果不是什么，你可以告诉我如何解决这个问题。感谢。

您可以在此处看到两张图片：http://demo.digitaldraping.com/configurator/test/

HTML

<div class="Fabric"><img src="img/swatch/2016.jpg" alt="" /></div>
<div class="Canvas"></div>  

</div><!-- #Config -->

<script src="js.js"></script>

JS

// Load XML
    $.ajax({
        url: 'data.xml', // name of file you want to parse
        dataType: "xml",
        success: parse,
        error: function(){alert("Error: Something wrong with XML");}
    });

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



$(document).ready(function(){

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

}); //document.ready End

Answer 1

使用.on()绑定动态添加元素的事件。

在加载时将事件绑定在document或页面上已有的容器上。

样品：

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

Answer 2

由于您正在使用动态元素使用事件分区模型来使用.on()注册事件处理程序

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

如果.Fabric是dom load中存在的静态元素，那么您可以使用

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

Answer 3

jQuery的on()将允许您通过冒泡来收听事件。

最好比文档

更接近听

更改

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

到

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

Answer 4

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

更改为：

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 !');
          });

    );
 }); 
}

等待脚本添加元素

4 个答案: