Javascript 在jQuery中创建的元素未触发侦听器

我对这个问题有点困惑。我试图创建一个动态表单，在这个表单中，用户可以根据自己的需要进行任意多的描述、复选框和数字输入。我只是用jQuery创建了一个简单的动态公式，到目前为止，我可以创建一些元素，当用户单击remove字段时，这些元素会自动删除，我可以在表单中添加更多元素。 代码如下：

<!-- THE FIELD THAT I APPEND IS A COPY OF THIS ITEM -->
 <div class="container-field-form" id="description-field">
    <div class="container-field-form__img remove"> 
       <img  src="/static/svg/problem.svg" class="icon-to-do-form img-zoom-min " id="deleteButton">
    </div>
    <div class="container-field-form__field form-field"> 
        <textarea onchange="this.value = capitalizeFirstLetter(this.value)" class="form-control form-field" name="description" id="description" rows="3" placeholder="Enter the description"></textarea>
    </div>   
 </div>


<!-- FROM HERE I APPEND AND ONLY APPEARS ONE AT THE BEGGGINING -->
 <div class="container-field-form" id="description-field">
     <div class="container-field-form__img" id="add-description"> 
         <img  src="/static/svg/add-component.svg" class="icon-to-do-form img-zoom-min " id="deleteButton">
      </div>
      <div class="container-field-form__field form-field"> 
         <textarea onchange="this.value = capitalizeFirstLetter(this.value)" class="form-control form-field" name="description" id="description" rows="3" placeholder="Enter the description"></textarea>
      </div>   
 </div>

我在这里遇到的问题是，我在HTML中硬编码的项目，在需要删除或复制任何营地时，它们会正确地回答删除，但对于我添加到HTML中的新项目，它们不会回答侦听器，它是HTML的精确副本，在HTML中硬编码的项目可以使用任何数字，插入带有jQuery编号的html

这里我给你一个jQuery代码，它只是在HTML字段的副本前面加上前缀，没有问题，当我们点击remove删除当前字段时，它会删除该字段，并且只在硬编码的HTML中工作

 $("#add-description").click(function() {
        $("#description-fields").prepend('<div class="container-field-form" id="description-field"><div class="container-field-form__img remove"><img  src="/static/svg/problem.svg" class="icon-to-do-form img-zoom-min " id="deleteButton"></div><div class="container-field-form__field form-field"><textarea onchange="this.value = capitalizeFirstLetter(this.value)" class="form-control form-field" name="description" id="description" rows="3" placeholder="Enter the description"></textarea></div></div>')
    });

$(".remove").click(function() {
        $(this).parent().remove();
    });

我错过什么了吗？ 提前感谢

您应该使用

$'html'.onclick，div.remove，函数{ $this.parent.remove； };

---

这回答了你的问题吗？只有在最初加载页面时，事件才能绑定到页面中已经存在的元素。对于动态添加的元素，您需要从已经存在的父元素（例如，从文档）委派事件。请尝试$'document'。单击，'.remove'，函数{$this.parent.remove；}；。这里的更多信息：您还为每个动态元素重用相同的ID，这将导致在尝试通过ID选择元素时出现未定义的行为感谢您的反馈，现在我了解了场景背后的技术行为欢迎使用堆栈溢出。这个答案中的代码很好，但是可以通过解释它是如何工作的，而不是说应该使用解释为什么应该使用这种技术来改进答案。只使用代码的答案不能像代码结合解释那样帮助其他人学习。上面的答案之所以有效，是因为它不是用加载DOM后创建的东西调用方法，而是从包含所有子对象的父对象调用，父对象是在加载DOM中创建的，而子对象不是，因此，我需要从父亲那里而不是从孩子那里调用该方法，这是我的错误