Question

我有以下代码不能正常工作
我通过弹出窗口创建这个div，通常在弹出窗口中会有20个这样的div 我正在尝试鼠标悬停它不工作，如果我在div本身给它的工作mousover事件。
任何错误。

<div dataindex="0" class="clstImages" id="dlstImages0"><img alt="Almond Branches in Bloom, San Remy, c.1890" title="Almond Branches in Bloom, San Remy, c.1890" src="http://imagecache5d.art.com/CropHandler/crop.jpg?img=21-2107-SA3ED00Z&amp;x=0&amp;y=0&amp;w=400&amp;h=400&amp;size=2&amp;maxw=100&amp;maxh=100&amp;mode=sq&amp;q=100" id="eachimg">
</div>

$('.clstImages img').hover(function () {
    alert("mouseover");
}, function () {
    alert("mouseout")
});

Answer 1

您的悬停功能很好，但您需要将其包装在$(document).ready()函数中。

我相信你在DOM完成加载之前尝试运行脚本。在执行其内容之前，使用$(document).ready()等待DOM完成加载。以下是对该函数jQuery .ready()

的引用

此外，您应该记得关闭图片标记

<img src="someimage" >无效HTML

<img src="someimage" />是有效的HTML

另外你应该记得结束你的javascript声明。以下行未终止。

alert("mouseout")

应该是

alert("mouseout");

注意末尾的分号

这是一个有效的demo http://www.jsfiddle.net/R7KmW/

<强>被修改

在您点击方向箭头之前，您的元素似乎并未实际填充。您可能想尝试使用live（）或delegate（）。基本上这两个Jquery方法允许您绑定到未来的DOM元素（使用代码插入的元素，即AJAX，动态创建的元素）。我知道这种类型的答案已经发布给你了，但我真的没有时间调试你的整个页面以解决问题。我为没有提供更好的答案而道歉，但也许您可以创建一个只有一个具有相同功能的图像的小测试，并尝试以这种方式进行调试。

$(document).ready(function () {
    $('.clstImages img').live('mouseover', function () { 
      alert("mouseover"); 
    })
    .live('mouseout', function () { 
      alert("mouseout");
    });
});

Answer 2

<强>更新 <img>代码是自动关闭的，因此您应该写<img src="..">而不是<img src="..." />注意最后的斜杠。**

使用jQuery的live()方法

说明：为现在和将来与当前选择器匹配的所有元素附加处理程序。

$('.clstImages img').live("mouseenter", function () {
    alert("mouseenter");
});
$('.clstImages img').live("mouseleave", function () {
    alert("mouseleave");
});

或者当您创建<img>时，直接指定点击事件（这可能是更好的方法）。

鼠标悬停不起作用

2 个答案: