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

Question

我对这个问题有点困惑。我正在尝试创建一个动态表单，其中用户可以根据需要进行尽可能多的描述、复选框和数字输入。我只是用 jQuery 创建一个简单的动态公式，到目前为止，我可以创建它们自行删除的元素（当用户单击删除字段时），并且我可以在表单中添加更多元素。代码如下：

<!-- 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 字段的前面添加一个副本（工作没有问题），并且当我们单击删除时删除该字段（删除当前字段并起作用，但仅在硬编码的 html 中）

$(".remove").click(function() {

        $(this).parent().remove();

    });

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

Answer 1

你应该使用$('html').on("click", "div.remove", function() {&nbsp; &nbsp;$(this).parent().remove();});