将鼠标悬停在动态添加的元素 (jQuery) 上时出现 <span>

Question

我正在使用 HTML、CSS 和 jQuery 构建一个购物清单，其中的项目通过 <input> 字段动态添加到列表中。它仍在进行中，但这是现在获得想法的样子：http://lucymac.github.io/shopping-list/

该列表名为 ul.list-items，它有 2 种类型的项目：li.pending 和 li.done。我包含了一些静态项来展示它的外观：2 个 'pending' 项（黑色字体的 "eggs" 和 "bacon"）和一个 'done' 项（ "baked beans" 灰色字体，删除线）。

当用户将鼠标悬停在其中一个上时，'pending' 项会出现绿色对勾 span.tick，'done' 项会出现红叉 span.delete。我通过使用 jQuery 中的 .hover() 方法实现了这一点。但是，这不适用于动态添加的项目：通过输入字段添加的项目在悬停时不会显示绿色勾号。

我对此进行了相当广泛的研究，一些来源（包括 this one）建议使用 .on() 而不是 .hover()，但我一定没有得到正确的语法，因为它仍然是不工作。

你能帮忙吗？？我知道很多人都问过关于动态元素和 .on() 方法的问题，但我真的不能让它工作，我真的认为这不是现有的 none 的重复questions/answers 帮了我这么远。我是初学者，所以我很感激这可能是因为我不理解其他问题中提出的所有其他情况，但我碰壁了。

jQuery 悬停 'pending' 项时显示绿色勾号 span.tick 的代码 li.pending:

第一次尝试：以下仅适用于静态项目，不适用于动态添加的项目

$("li.pending")
            .hover(
                function() {
                $(this).append($('<span class="tick"> </span>'));
            }, function() {
                $(this).find('span:last').remove();
            })

第二次尝试：尝试使用 .on() 的其他选项，因此它适用于动态添加的项目，但这根本不起作用

$(document)
            .on("hover", "li.pending", function() {
                $("li.pending").append('<span class="tick"> </span>');
            }, function() {
                $("li.pending").find('span:last').remove();
            })

非常感谢您的帮助:)

Answer 1

您应该使用 mouseenter 和 mouseleave 事件

$(document).on("mouseenter", "li.pending", function() {
                $(this).append('<span class="tick"> </span>');
            }).on("mouseleave", "li.pending", function() {
                $(this).find('span.tick').remove();
            });

因为 .hover() 是 shorthand 因为：

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

事件处理程序仅绑定到当前选定的元素；它们必须在您的代码进行事件绑定调用时存在于页面上。

您需要对动态创建的元素使用Event Delegation using .on()委托事件方法。

即

$(document).on('event','selector',callback_function)

代替document你应该使用最近的静态容器以获得更好的性能。

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

将鼠标悬停在动态添加的元素 (jQuery) 上时出现 <span>

Making a <span> appear when hovering over a dynamically-added element (jQuery)

jquery

dynamic