0

我正在使用 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);
});

有人帮忙吗？

4

2 回答 2

2

.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 放入页面后选择元素并附加事件处理程序。

于 2013-02-03T00:14:48.177 回答
0

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

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

$(".crunched")当您运行代码时，该集合是空的，因此事件处理程序没有附加到任何东西。

于 2013-02-03T00:15:06.780 回答