0

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

你可以在这里看到这两张图片：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
4

4 回答 4

3

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

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

样本：

$(document).on('click', '.Fabric img', function(){
        alert("image clicked");
});
于 2013-06-11T03:42:43.063 回答
1

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

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

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

$('.Fabric').on('click', 'img', function () {
        alert("image clicked");
});
于 2013-06-11T03:41:42.967 回答
0

jQueryon()将允许您通过冒泡来监听事件。

比文档更深入地聆听它会更好

改变

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

至

$(".Fabric").on("click", "img", function () {
        alert("image clicked");
});
于 2013-06-11T03:45:51.957 回答
0 
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 !');
          });

    );
 }); 
}
于 2013-06-11T04:31:30.787 回答