Question

我使用HTML，CSS和jQuery构建购物清单，其中的商品通过<input>字段动态添加到列表中。它仍然在进行中，但现在看来它是一个想法：http://lucymac.github.io/shopping-list/

该列表名为ul.list-items，它有两种类型的项：li.pending和li.done。我已经添加了一些静态项目来展示它的外观：2＆＃39;待定＆＃39;项目（＆＃34;鸡蛋＆＃34;＆＃34;培根＆＃34;黑色字体），以及一个＆＃39;完成＆＃39; item（＆＃34;烤豆＆＃34;灰色字体，删除线）。

当用户在其中一个上面悬停时，会出现绿色勾选span.tick以便等待＆＃39;物品或红十字span.delete用于完成＆＃39;项目。我通过在jQuery中使用.hover()方法实现了这一点。但是，这对于动态添加的项目不起作用：通过输入字段添加的项目在悬停时不会出现绿色勾号。

我已经对此进行了相当广泛的研究，并且有几个来源（包括this one）建议使用.on()而不是.hover()，但我不能正确使用语法，因为它＆＃ 39; s仍然无法正常工作。

你帮忙吗？我知道很多人都提出了有关动态元素和.on()方法的问题，但我真的无法使其发挥作用，我认为这不是重复，因为现有的问题/答案都没有到目前为止帮助了我。我是一个初学者，所以我很欣赏这可能是因为我不理解其他问题中提到的所有其他案例，但我已经碰壁了。

jQuery代码，在悬停时显示绿色勾号span.tick，等待＆＃39;商品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()是简写：

$（selector）.mouseenter（handlerIn）.mouseleave（handlerOut）;

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

您需要使用Event Delegation委托事件方法{strong}动态创建元素 {/ 3}}。

即

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

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

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

使<span>出现在动态添加的<li> </li> </span>中

1 个答案: