Question

我使用jquery动态地将图像添加到我的页面。基本上我在页面上创建图像的“pixel-y / lo-res”版本，并在页面加载超过原始页面。然后一个典型的“悬停淡出”的东西应该在鼠标悬停时淡出它们，显示出这些信号......仿佛“向上 - 放逐”......如果这是有道理的。

所以我有了进入的图像..但不知何故，悬停监听器没有附加。起初我尝试悬停，现在我点击是因为它更容易排除故障。什么都没有。

.on（）函数应该将自己附加到动态添加的项目，对吧？出了什么问题？我没有收到任何错误。它只是不起作用。

$.ajax({
        type:"POST",
        url:"js/pixelsandwich/pixelsandwich.php",
        data:{src:src},
        success:function(response){  // if there is already a "lo-rez" image, I get that URL.. if there isn't, one is created and I return that URL
            newImg = $("<img class='crunched'>"); // create the new <img>
            newImg.attr('src', response); // assign the source
            frame = $that.parent(); // grab the containing frame
            frame.append(newImg);  // add the new image.  css:position:absolute and z-index take care of the rest
        }
    });

$(".crunched").on("click", function(){  // << this just isn't attaching at all
     alert("hello");
    $(this).fadeTo('slow',0.5);
});

Cn有人帮忙吗？

Answer 1

.on（）函数应该附加自己，甚至动态添加项目，对吗？

不，使用动态创建的元素，您必须使用.on()绑定到运行代码时已存在的元素。最坏的情况通常是body元素，但是你可以在DOM中选择的元素越近越好。

假设.crunched是动态添加元素的类，请尝试：

$("body").on("click", ".crunched", function(){  // << this just isn't attaching at all
     alert("hello");
    $(this).fadeTo('slow',0.5);
});

根据jQuery文档：

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.on（）时页面上必须存在。要确保元素存在且可以选择，请执行事件绑定在文档就绪处理程序中的元素页面上的HTML标记。如果将新HTML注入页面，选择元素并在新HTML之后附加事件处理程序放入页面。

Answer 2

应使用on方法将事件处理委托给动态添加元素的现有祖先。例如：

$(document).on("click", ".crunched", function(){  // << this just isn't attaching at all
     alert("hello");
    $(this).fadeTo('slow',0.5);
});

当您运行代码时，集合$(".crunched")为空，因此事件处理程序未附加到任何内容。

在jQuery中附加事件监听器到动态生成的图像？

2 个答案: