Question

我有一种方法可以动态添加附加到目标容器的容器。执行操作后，我删除了操作容器，但现在我必须向父容器添加一个类，但问题是它是否已设置（类名称为父容器），但它本身已被删除。为了进一步说明，我要添加一个示例代码

<div class="main">
  <ul>
    <li>some contents</li>
    ................
    ................
  </ul>
  <ul class="dynamic_container">
   <li>actions</li>
   ................
  </ul>
</div>

当用户将鼠标悬停在主类容器上时会添加dynamic_container，并且一旦执行了操作，就会删除它。但现在它被添加（类名）但它也被删除了。我相信这基本上是因为$（e.target）被删除....

任何建议/意见将不胜感激。提前谢谢。

编辑：

$（e.target）。家长（ '主 '）addClass（' 当前'）。（此代码无法将类添加到.main div）。此代码从ul.dynamic_container执行（在div.main上鼠标悬停时添加到dom中）

编辑2： jsfiddle链接：这是结构（不是实际代码）

http://jsfiddle.net/CASy6/

Answer 1

感谢发布小提琴。现在我们可以找出一些妨碍它工作的问题。

第一个问题是，当您尝试将鼠标移到按钮上时，它们会消失。如果您向console.log和mouseover处理程序函数添加一些mouseout语句，您会看到它们被调用太多了。这是由于这些事件在嵌套元素的情况下的工作方式。

jQuery为此问题提供了一个很好的解决方案：mouseenter和mouseleave事件。请参阅API docs中的相关内容，特别是描述mouseover和mouseenter之间差异的部分。

请参阅此版本的jsFiddle：http://jsfiddle.net/CASy6/1/中实现的此修复程序。有了这个，您现在可以实际点击按钮，并且还可以避免一大堆不必要的.append()和.remove()来电。

下一个问题是单击按钮时不会调用任何处理程序。

原因是您通过调用例如

来设置处理程序

$('li.first').on('click', function(e){ ... });

当页面加载时，但在那一刻，选择器li.first不匹配任何内容，因为您还没有将按钮附加到其中一个div。因此处理程序仅在页面加载时附加，并且它们没有任何附加内容。

此问题的一个解决方案是使用委派事件（see docs）。这意味着我们将一个处理程序附加到容器元素（始终存在，包括页面加载），并处理从后代元素冒出的事件。

在这种情况下，我们可以将委托事件处理程序附加到.main div，它处理来自其中一个按钮的点击：

$('div.main').on('click', 'button.first', function(e){
    $(this).closest('.main').addClass('current');
    alert('first action');
});

第二个参数button.first是一个选择器，用于确定此处理程序将处理哪些后代事件。（我修复了附加的html，因此class属性附加到button元素而不是li元素;它们在两个按钮之间不一致。）

请在此处查看以下修复程序：http://jsfiddle.net/CASy6/2/

使用jquery从动态添加的容器动态地将类添加到父容器

1 个答案: