JQuery - .load() 后的 .hover() 图像并 .append()ed 到 .find()div
嗨:)我遇到了一些麻烦。
（简短形式：每当页面由 .each() 填充时，.hover 和 .click 函数将不起作用。尽管如果我手动填充页面，.hover() 和 .click() 会像魅力一样工作）
以前我有这个：
<imgThumb imgn="1">thumb</imgThumb>
<imgThumb imgn="2">thumb</imgThumb>
还有这个，
$("imgt").hover(
function () {
var imgN = $(this).attr("imgn");
var img = new Image();
$(img).load(function(){
$(this).hide();
$("#mainRight_PubSpot").append(this);
$(this).fadeIn();
}
)
.attr("src","image/thumb"+imgN+".jpg");
},
function () {
$("#mainRight_PubSpot").find("img:last").remove();
}
）； 工作起来就像一个魅力，没什么大不了的。直到我用这个替换
$.get('gallery.php',
function(data){
var obj = jQuery.parseJSON(data);
//alert(obj)
$.each(obj,function(index, value){
//alert(this);
var n = index+1;
//alert(""+n+" "+index);
var nimg = new Image();
$(nimg).load(function() {
$(this).hide();
/*$("#galImg").css({
'width':50,
'height':50
});*/
$("#mainLeft_imgHold").append("<imgt imgn="+n+"></imgt>")
$("#mainLeft_imgHold").find('imgt:last').append(this);
$(this).fadeIn();
}).attr({
src:""+this,
imgn:""+n,
id:"imgThumb"
});
});
}
);
现在图像加载毫不费力，尽管 .hover 和 .click 功能不起作用。
有人知道是什么原因导致了这一切骚动吗？
Hi :) I've ran into a bit of a trouble.
(short-form: whenever the page is populated by .each() the .hover and .click functions wont work. althought if i populate the the page manually .hover()s and .click()s work like a charm)
formerly i had this:
<imgThumb imgn="1">thumb</imgThumb>
<imgThumb imgn="2">thumb</imgThumb>
and this,
$("imgt").hover(
function () {
var imgN = $(this).attr("imgn");
var img = new Image();
$(img).load(function(){
$(this).hide();
$("#mainRight_PubSpot").append(this);
$(this).fadeIn();
}
)
.attr("src","image/thumb"+imgN+".jpg");
},
function () {
$("#mainRight_PubSpot").find("img:last").remove();
}
);
worked like a charm, no biggies. Until i replaced <imgThumb> with this:
$.get('gallery.php',
function(data){
var obj = jQuery.parseJSON(data);
//alert(obj)
$.each(obj,function(index, value){
//alert(this);
var n = index+1;
//alert(""+n+" "+index);
var nimg = new Image();
$(nimg).load(function() {
$(this).hide();
/*$("#galImg").css({
'width':50,
'height':50
});*/
$("#mainLeft_imgHold").append("<imgt imgn="+n+"></imgt>")
$("#mainLeft_imgHold").find('imgt:last').append(this);
$(this).fadeIn();
}).attr({
src:""+this,
imgn:""+n,
id:"imgThumb"
});
});
}
);
Now the images load without a sweat wahtsoever althought the .hover and .click functions wont work.
Anyone has a hint on to what might be causing all this commotion?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您在页面加载后加载元素（异步等），则需要使用
.live()方法附加诸如hover和click之类的处理程序。以下是 API 页面的链接： http://api.jquery.com/live/
请注意
.live()并不支持开箱即用的所有 jQuery 智能侦听器（例如hover）。您最终可能必须手动实例化mouseover和mouseout：可以通过创建自己的侦听器来解决此问题，但这是另一个问题的另一个答案。
If you are loading elements after pageload (asynchronously, etc.) you need to attach handlers like
hoverandclickwith the.live()method.Here's a link to the API page: http://api.jquery.com/live/
Note that
.live()doesn't support all of jQuery's smarter listeners (likehover) out of the box. You may end up having to instantiate themouseoverandmouseoutmanually:There are ways around this by creating your own listeners, but that's another answer for another question.
它失败的原因是，当您使用 Javascript 将新项目添加到页面时，DOM 会发生变化，并且需要重新渲染 Javascript。
http://api.jquery.com/live/ 可以为您解决此问题，或者您可以尝试实现您自己的方法，使用
.change()处理程序检查 DOM 是否已更改。The reason it fails is because when you add new items to a page with Javascript, the DOM changes and the Javascript needs to be re-rendered.
http://api.jquery.com/live/ can fix this for you, or you can try implementing your own method of checking if the DOM has changed with
.change()handler.