0

我编写了一些 JQuery，它允许我根据一些用户输入向页面添加 DIV 元素/HTML（例如：抓取一个链接以及他们对该链接的评论。）

那行得通。

但是当我将鼠标悬停在其中一个元素上时（用户可以添加多个元素）并允许用户通过单击“X”或某种垃圾箱图标来删除它，我正在尝试添加一些代码来更改颜色.

出于某种原因（我的 JavaScript 功夫很弱），该.mouseover()功能无法正常工作。我猜这是因为它无法运行.mouseover()，因为浏览器第一次打开时它不存在？（而是稍后由其他 JQuery 代码使用添加append()）

这是不起作用的代码：

 $(document).ready(function() {
    $('.link_and_description').mouseover(function() {
        $(this).css('background', '#fef4a7');
    }).mouseout(function(){
        $(this).css('background', '#f5f5f5');
    });
 });

你可以在这里看到 jsfiddle：

http://jsfiddle.net/CG4Ew/

4

3 回答 3

2

由于link_and_description元素是动态添加的，因此您需要使用事件传播来注册悬停事件

$(document).ready(function() {
    $(document).on('mouseenter', '.link_and_description', function() {
        $(this).css('background', '#fef4a7');
    }).on('mouseleave', '.link_and_description', function(){
        $(this).css('background', '#f5f5f5');
    });
});

演示：小提琴

于 2013-06-05T03:47:16.260 回答
1

由于您正在动态添加元素，因此附加的直接事件没有任何效果，因为它们当时不存在于 DOM 中。您可以通过使用带有on(). 将事件绑定到容器#urls_go_below以委托给具有类的元素，该类.link_and_description将在您的情况下的 onclick 事件期间添加。

试试这个方法。

 $('#urls_go_below').on({   //<-- Bind the event to the container for delegation, 
               //if '#urls_go_below' doesnot exist in DOM at the time of registring        
               //then you can use another container or worstcase document element. i.e $(document).on(...
        mouseenter: function () {
             $(this).css('background', '#fef4a7');
         },
         mouseleave: function () {
             $(this).css('background', '#f5f5f5');
         }
     },
     '.link_and_description'); // Target element which will have the event delegated.

演示

请参阅.on()文档。

另一点是$(function () {document.ready 本身，因此您不需要包含准备好包装鼠标悬停事件的另一个文档。

使用 mouseenter/mouseleave 而不是 mouseover/mouseout。由于以下原因。

来自文档

mouseenter 事件在处理事件冒泡的方式上与 mouseover 不同。如果在这个例子中使用了 mouseover，那么当鼠标指针移动到 Inner 元素上时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter 事件仅在鼠标进入它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标进入 Outer 元素而不是 Inner 元素时，会触发处理程序。

于 2013-06-05T03:40:52.303 回答
1

当对象被附加时，您将需要绑定 mouseover 和 mouseout 事件。

因此，在您附加 div 后，运行类似：

$('#foo').bind('mouseover',function() { $(this).css('background', '#fef4a7'); });

#foo您新创建的元素在哪里。有关 .bind() 的更多信息可以在这里找到：http: //api.jquery.com/bind/

于 2013-06-05T03:41:18.680 回答