Jquery 类选择器无法选择使用 .append() 添加的新类实例

Posted 2023-03-05

【中文标题】Jquery 类选择器无法选择使用 .append() 添加的新类实例

【英文标题】：Jquery Class Selector Fails to Select new Class Instances Added with .append()

【发布时间】：2012-08-02 14:49:04

【问题描述】：

我对 javascript/jQuery 是半新的，所以如果我错过了一些基本的东西，请提前道歉。我有一个函数，只要用户输入具有特定类的元素，就会触发该函数。

     $('.relevantClass').keyup(function()
     //code...
     );

现在这个函数最终可能会根据具体情况创建大量新的 html，包括通过 .append() 方法的 relevantClass 的新实例。

     var newHTML = <div class='relevantclass'>Content...</div>;
     $('#wrapper').append(newHtml);

然而，当用户输入新创建的relevantClasses 时，jQuery 选择器似乎没有检测到并执行该函数。我检查了新创建的 Html，它具有正确的类标签和相关类的旧实例。

我猜这与 .append(); 弄乱 DOM 有关，我需要以某种方式“刷新”选择器并让它做 jQuery 的事情来研究 DOM 以找到新的类。关于如何做到这一点的任何想法？有没有我找不到的 jQuery 方法？

【参考方案1】：

您必须使用on() 来附加适用于动态内容的事件：

var $parent = $("selector"); //the element you're appending .relevantClass to
$parent.on("keyup",".relevantClass",function()
    //code...
);

请记住，要使用动态内容，您必须将事件附加到页面加载时存在的 relevantClass 最接近的父级。

有些人使用body，但您应该习惯使用尽可能接近动态内容的父元素。这样事件委托就可以在较小的范围内发生。

更多关于on()here的信息。

另外，我希望newhtml 变量用引号括起来。

【讨论】：

太好了，谢谢！看起来这正是我所需要的。如果它有效，我会在明天回到这个问题时让大家知道。 newHtml 实际上是大约三个嵌套 div 的一些可怕的 200 字符字符串，其中包含许多变量，我必须使用 .replace 和正则表达式来动态格式化。然后它被传递给.append。只是想让你摆脱它的所有可怕。

@purmou 虽然我同意为委托事件处理程序使用最近的父级是一个好习惯，但您也应该在代码中更清楚地说明这一点；如果.relevantClass 尚不存在，.parent() 将找不到任何东西并且处理程序永远不会被绑定。它在这种情况下有效，因为存在现有的.relevantClass 元素并且代码只是附加了更多，但通常您应该基于 html 为父级硬编码直接选择器。 （无论如何+1）

@n***s：非常棒，我什至没有意识到这个问题。我会说清楚的。

【参考方案2】：

$('.relevantClass').on('keyup', function()
    //code...
);

【参考方案3】：

试试类似的东西

$('body').on('keyup', '.relevantClass', function()  ... 

这个想法是您使用现有的根元素并将您的类选择器用作过滤器。请参阅示例here。