Question

我写了一个图像共享js脚本。一旦页面中有图像，它将添加div包装器。例如，

<img href="xxx.jpg" />

我的脚本将进入

<div class="wrapper">
    <img href="xxx.jpg" />
</div>

而且，.wrapper类中还有一个mounseover事件。一切都很顺利，直到下面的代码结构。我们有一个博客网站，有很多div包装了img标签。

<div class="a">
    <img href="xxx.jpg" />
</div>

当我的js脚本包装一个“包装器”类时，我的鼠标悬停事件在这些HTML结构中不再起作用。谁能告诉我这里发生了什么？提前谢谢！

Answer 1

查看javascript代码会有所帮助。据此，我的猜测是你没有约束.a并仍然绑定到.wrapper

Answer 2

这可能是实时事件绑定的情况，您可能需要检查jQuery的live，从1.7开始，由于ON而被弃用 - on（）现在生活的东西（）曾经做过

你说过 - 一旦有了一张图片，它就会包好 - 你究竟是怎么做到的？

解决方案可能在那里，例如。在您检查图像并将其包装的地方，您需要再次附加鼠标悬停

//  firstly, why is your image having href=xxx.jpg
//  should be src=xxx.jpg I suppose

$('img[href$="jpg"]').wrap('<div class="wrapper">');

//  Whatever might be your logic above for wrapping
//  you need to again call bind method here OR
//  you need to call one final time at the end of all your code

$('img[href$="jpg"]')
    .parent('.wrapper')
    .bind('mouseover', function() {
        $(this); // $(this) - is your current wrapper div now
        // your code
    });

如果您在包装时不知道图像何时到来，或者它是通过ajax来的，那么您可能需要查看jQuery的livequery plugin

$('div.wrapper').livequery(function() {
    $(this).bind('mouseover', function() {
        // your code
    });
});

Answer 3

$('img').wrap('<div class="wrapper">');

你应该用div包装并在该div上应用mouseover而不是图片。

Jquery mouseover事件不起作用

3 个答案: