我的 jquery 代码不适用于我在页面加载后添加的表单中的动态字段[重复]答案

【问题标题】：my jquery code don't work on my dynamic field in this form that add after page loaded [duplicate]我的 jquery 代码不适用于我在页面加载后添加的表单中的动态字段[重复]
【发布时间】：2022-01-20 23:25:31
【问题描述】：

我的 jquery 代码在页面加载后添加的此表单中的动态字段上不起作用：

我为 jquery 添加了这个 api：

 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;

我的 html 表单：

<form method="post" class="row g-3 my-4 px-3 needs-validation" novalidate>
    {% csrf_token %}

    <!-- Job -->
    <div class="col-lg-8 job_field">
        <label for="job" class="form-label fw-bold">Job</label>
        <div class="input-group">
            <input type="text" class="rounded-3 form-control" id="job"
                   placeholder="example: Dentist" value="Dentist" name="job"
                   required>
            <span class="add_job cursor input-group-text rounded-3 bg-Goldenrod mx-3 bg-gradient">+ Add Another Job</span>
        </div>
    </div>
    <!-- Job -->


    <!-- Save Change Button-->
    <div class="col-12 mt-5">
        <button class=" col-12 py-2 col-md-3 btn btn-Goldenrod bg-gradient fw-bold" type="submit">
            Save Change
        </button>
    </div>
    <!-- Save Change Button-->


</form>

我的 jquery 代码：

<script>


    $('.add_job').click(function () {


        $('.job_field').append('<div class=" another_job input-group mt-3"> <input type="text" class="rounded-3 form-control" id="job" placeholder="example: Dentist" name="job" required><span id = "remove" class="cursor input-group-text rounded-3 bg-danger mx-3 bg-gradient">- Remove</span></div>');

    });

    $('#remove').click(function () {

        $(this).parent.addClass('d-none')

    });
</script>

我的“+添加另一个工作”按钮正常工作..但我在加载页面后添加的“-删除”按钮不起作用。

【问题讨论】：

有两件事：1）当您使用Id时，它只会在一个元素上，您需要使用Call或任何其他方式。此外，如果您在文档中添加新 html 后要删除，则需要再次初始化 Click 事件以进行删除
将$('#remove').click(function () { 更改为$(document).on("click", ".remove', function () { 并给它一个类remove 而不是其他cmets 中提到的id。

标签： javascript html jquery css ajax

【解决方案1】：

你不能在页面中多次使用Id，jQuery只会理解第一个Id。您需要为删除/隐藏行添加类。此外，您还需要在所有新添加后初始化删除的 Click 事件：

查看示例代码：

    <script>
        $('.add_job').click(function () {
            $('.job_field').append('<div class=" another_job input-group mt-3"> <input type="text" class="rounded-3 form-control" id="job" placeholder="example: Dentist" name="job" required><span id="remove" class="cursor input-group-text rounded-3 bg-danger mx-3 bg-gradient remove_record">- Remove</span></div>');
            $('.remove_record').click(function () {
                $(this).parent("div").addClass('d-none')
            });

        });
    </script>

【讨论】：