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

Question

我是javascript / jquery的半新手，所以如果我遗漏了一些基本内容，请提前道歉。我有一个函数，只要用户键入具有特定类的元素，就会触发该函数。

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

现在这个函数可能会根据情况结束，通过.append（）方法创建大量新的HTML，包括relatedClass的新实例。

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

但是，当用户键入新创建的relatedClasses时，jquery选择器似乎不会检测并执行该函数。我检查了新创建的Html，它有正确的类标签和相关类的旧实例。

我猜这与.append（）;搞乱DOM，我需要一些“刷新”选择器并让它做jquery事情来研究DOM以找到新的类。有关如何做到这一点的任何想法？是否有一些我找不到的jquery方法？

提前致谢！

Answer 1

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

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

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

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

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

另外，我希望newhtml变量包含在引号中。

Answer 2

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

Answer 3

尝试类似

的内容

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

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