DOM动态时如何使用JQuery.find（）

Question

我有一个具有以下流程的级联菜单；

• 单击菜单1中的项目
• 创建和更新菜单2 li元素
• 单击菜单2中的项目

• 创建并更新菜单3 li元素

  等。

```

$firstMenu = $('.prime-menu');
$secondtMenu = $('.second-menu');
$thirdMenu = $('.third-menu');

```

当我遍历不同元素时。在每个菜单中，使用find()是一件好事，问题在于，当没有创建除第一个菜单以外的任何菜单时，脚本会加载，因此$secondtMenu.find('.item-year').click(function (clickEvent) {})的长度为0。

我在JQuery中可以使用哪些选项来使find()函数在DOM中尚未加载的元素上起作用？

我曾想创建一个事件监听器，但我认为还有更多简洁的方法。

Answer 1

在处理动态HTML时，应使用委托。例如，使用document或body之类的外部元素来“开始”您的发现。

$(document).find(".prime-menu");

编辑：查找和事件委托 解决方案是将find与事件委托一起使用。示例事件。

$(document).find(".prime-menu").on('mouseenter', '.track-table tbody tr', function(){ });

Answer 2

将点击处理程序绑定到菜单父菜单，而不是实际菜单项。

类似的事情可能会起作用...

$("#menuparent").on("click",".item-year",function(event) {
    var clicked_element = event.currentTarget;
});

以这种方式进行操作，即使在绑定click事件之后将具有.item-year类的元素添加到dom中，它仍然会注册点击。

Answer 3

您声明，当您单击菜单1中的项目时，它将创建并更新菜单2 li元素。在此函数中，应进行事件绑定。 DOMElement在添加到dom之前将存在于js中，并且应该在其中设置绑定。

如果您需要帮助，请与我们分享此代码，我相信我自己或其他人将能够帮助您解决该问题。