Question

我写了一些JQuery，允许我根据一些用户输入将DIV元素/ HTML添加到页面中（例如：抓取链接及其在该链接上的评论。）

那是有效的。

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

出于某种原因（我的JavaScript功夫很弱），.mouseover()功能无效。我猜它是因为它无法运行.mouseover()因为它在浏览器首次打开时不存在？（而是稍后使用append()）

添加其他JQuery代码

以下是无效的代码：

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

你可以在这里看到jsfiddle：

http://jsfiddle.net/CG4Ew/

Answer 1

由于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');
    });
});

演示：Fiddle

Answer 2

由于您是动态添加元素，因此附加的直接事件没有任何影响，因为它们在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.

Demo

请参阅.on()文档。

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

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

来自docs

的

mouseenter事件在处理事件冒泡的方式上与鼠标悬停不同。如果在此示例中使用鼠标悬停，则当鼠标指针移过Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter事件仅在鼠标进入绑定的元素而不是后代时触发其处理程序。因此，在此示例中，处理程序在鼠标进入外部元素时触发，而不是内部元素。

Answer 3

你需要绑定鼠标悬停＆amp;对象被追加时的mouseout事件。

所以在你追加div运行之后：

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

#foo是您新创建的元素。有关.bind（）的更多信息，请访问：http://api.jquery.com/bind/

JQuery - 从输入添加DIV，然后允许用户删除/编辑它

3 个答案:

Demo