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

Jquery Class Selector Fails to Select new Class Instances Added with .append()

本文关键字：添加 实例 新类 append 选择器 选择 Jquery      更新时间：2023-09-26

我对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方法我找不到吗？

您必须使用on()来附加对动态内容有效的事件：

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

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

有些人使用body，但您应该习惯于使用尽可能接近动态内容的父元素。这样一来，事件委派的规模就更小了。

有关on()的更多信息，请点击此处。

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

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

尝试类似的东西

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

其思想是使用现有的根元素，并使用类选择器作为过滤器。请参阅此处的示例。

相关文章：