Javascript jquery编辑动态生成的div内容

我有以下代码片段：

(document)
    .on("submit", ".edit-employee-form", function (e) {

    e.preventDefault();

    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        method: $(this).attr("method"),
        dataType: "html",
        context: this,
        data: $(this).serialize(),
        success: function (response) {

            p = $(this).parent();
            p.prevAll('#first-name').html($(this).find("#first_name").val());
            p.prevAll('#last-name').html($(this).find("#last_name").val());
            p.prevAll('#email').html($(this).find("#email").val());
            p.prevAll('#remain_case').html($(this).find("#remain_case").val());
            $(this).parent().hide();


            console.log('yay');

        },
        error: function (response, error) {
            console.log("ERROR");
            console.log(response);
            console.log(error);
        }
    });


}

)

它所做的是提交一个表单来编辑特定的员工。页面上会显示一个列表，然后更新html以反映用户提交的更改

我的问题是，一些员工也是通过ajax调用添加的，因此他们相应的列表元素会动态添加到html中。我似乎无法使用id名、姓氏、电子邮件等访问他们的div。关于如何选择动态添加的div，有什么建议吗

很抱歉，这是一张图片，但我似乎无法从chrome控制台上复制。第二个元素是动态添加的

<div class="container firm-employees">

<div class="row">

    <div class="col-lg-3 table-header">Name</div>
    <div class="col-lg-2 table-header">Surname</div>
    <div class="col-lg-3 table-header">E-Mail</div>
    <div class="col-lg-1 table-header">Cases</div>
    <div class="col-lg-3 table-header">Options</div>


</div>


    <div class="row manage-user-row">

        <div class="col-lg-3" id="first-name">Gray</div>
        <div class="col-lg-2" id="last-name">Sawyer</div>
        <div class="col-lg-3" id="email">masakotypu@hotmail.com</div>
        <div class="col-lg-1" id="remain_case">1</div>
        <div class="col-lg-3">

            <button type="button" id="205" class="btn btn-default btn-xs edit-user-button">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp; &nbsp;
                Edit User
            </button>


            <a href="edit/22">
                <button type="button" class="btn btn-default btn-xs">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp; &nbsp;
                    Edit Secretaries
                </button>
            </a>

        </div>

        <div id="ed-205" class="edit-employee-box">
            <form id="ef-205" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/205">

                <div class="row">

                    <div class="col-lg-3">

                        <label for="first_name" class="form_label">First Name</label>
                        <input type="text" name="first_name" value="Gray" id="first_name" class="form-control">


                    </div>

                    <div class="col-lg-3">

                        <label for="last_name" class="form_label">Last Name</label>
                        <input type="text" name="last_name" value="Sawyer" id="last_name" class="form-control">


                    </div>

                    <div class="col-lg-3">

                        <label for="email" class="form_label">E-Mail</label>
                        <input type="text" name="email" value="masakotypu@hotmail.com" id="email" class="form-control">


                    </div>

                    <div class="col-lg-3">

                        &nbsp;


                    </div>

                </div>

                <div class="row">

                    <div class="col-lg-3">

                        <label for="phone" class="form_label">Phone Number</label>
                        <input type="text" name="phone" value="+899-67-1063253" id="phone" class="form-control">


                    </div>

                    <div class="col-lg-3">

                        <label for="remain_case" class="form_label">Remaining Cases</label>
                        <input type="text" name="remain_case" value="1" id="remain_case" class="form-control">


                    </div>

                    <div class="col-lg-3">


                    </div>

                    <div class="col-lg-3">

                        &nbsp;


                    </div>

                </div>

                <div class="row">

                    <div class="col-lg-3">

                        <br>

                        <input type="submit" class="btn btn-success btn-md" value="Update User">


                        <a href="edit/22">
                            <button type="button" class="btn btn-info btn-md">
                                Reset Password
                            </button>
                        </a>


                    </div>

                    <div class="col-gl-3">


                    </div>

                </div>

            </form>

        </div>


    </div>








<div class="row manage-case-row"><div class="col-lg-3" id="first-name">Evan</div><div class="col-lg-2" id="last-name">Thompson</div><div class="col-lg-3" id="email">pubazof@hotmail.com</div><div class="col-lg-1" id="remain_case">2</div><div class="col-lg-3"><button type="button" id="206" class="btn btn-default btn-xs edit-user-button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> &nbsp; &nbsp;Edit User</button>&nbsp;<a href="edit" 206"=""><button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp; &nbsp;Edit Secretaries</button></a></div></div><div class="edit-employee-box" id="ed-206"><form id="ef-206" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/206"><div class="row"><div class="col-lg-3"><label for="first_name" class="form_label">First Name</label><input type="text" name="first_name" value="Evan" id="first_name" class="form-control"></div><div class="col-lg-3"><label for="last_name" class="form_label">Last Name</label><input type="text" name="last_name" value="Thompson" id="last_name" class="form-control"></div><div class="col-lg-3"><label for="email" class="form_label">E-Mail</label><input type="text" name="email" value="pubazof@hotmail.com" id="email" class="form-control"></div><div class="col-lg-3">&nbsp;</div></div><div class="row"><div class="col-lg-3"><label for="phone" class="form_label">Phone Number</label><input type="text" name="phone" value="+927-10-4155477" id="phone" class="form-control"></div><div class="col-lg-3"><label for="remain_case" class="form_label">Remaining Cases</label><input type="text" name="remain_case" value="2" id="remain_case" class="form-control"></div><div class="col-lg-3"></div><div class="col-lg-3">&nbsp;</div></div><div class="row"><div class="col-lg-3"><br><input type="submit" class="btn btn-success btn-md" value="Update User"><a href="edit/206"><button type="button" class="btn btn-info btn-md">Reset Password</button></a></div><div class="col-gl-3"></div></div></form></div></div>


</div>

---

您的代码应该确保完成ajax调用的顺序，因为它太快了，无法用肉眼观察。若追加ajax调用未完成，则不能使用偶数元素id选择这些元素

为此，您应该将ajax函数调用放入成功处理程序中。 如果第一个是成功，那么第一个是成功处理程序中的第二个，第二个是成功处理程序中的第三个，依此类推

简单的解决方案是使用PROMISE将所有与ajax相关的函数按顺序排列。 请参阅以下连结：

---

要检查元素是否及时成功附加，请使用“console.info或console.log”之类的内容检查控制台。如果长度为0，则追加ajax调用尚未完成。

jQuery应该能够选择动态添加的元素，只要在元素进入DOM后调用jQuery即可。如果你展示了一些html，这会有所帮助。你有html和其他JavaScript代码吗？我可以帮你解决问题吗？这很难回答，因为你没有展示代码，但我猜有两件事。1.代码中不应该有两个id相同的元素。您应该将名字替换为.first name，将姓氏替换为.last name等。ID始终应为uniqe。2.取决于如何将新员工代码注入HTML结构。如果f.eg。您使用$some element.html一些html

。但是你真的应该粘贴更多关于如何进行注入的代码。你应该能够通过右键单击要复制的元素并选择edit as html从chrome developer工具中复制。然后选择html并复制。@Kabkee您能详细说明一下吗？谢谢@Kabkee，我稍后会尝试并告诉您：@MrD您解决了问题吗？以不同的方式？抱歉-我昨天没有检查过它！我会在今天结束前查看我在格林尼治标准时间：并让你知道！谢谢你的帮助！