PATCH呼叫不适用于动态生成的用户列表编辑按钮

Question

我有一个API，可为我提供用户列表及其动态创建的编辑按钮。编辑按钮需要将数据传递到PATCH API。表单提交按钮仅刷新页面。无需触发PATCH API。以下是我正在尝试做的事情：

            function completeUserListRequest(result) {
            console.log(result);
            var givenName;
            var familyName;
            var eMail;
            var status;
            var userSub;
            //console.log(result[0].Attributes[3].Name); // example to get the First Name
            for (var counterx = 0; counterx < result.length; counterx++) {
               //console.log(result[counterx].UserStatus);
                userSub = result[counterx].Username;
                var userStatus = result[counterx].UserStatus;
                if (userStatus === 'CONFIRMED') {
                    status = 'Active';
                } else if (userStatus === 'FORCE_CHANGE_PASSWORD'){
                    status = 'Pending';
                } else {
                    status = 'Deactive';
                }
                for (var countery = 0; countery < result[counterx].Attributes.length; countery++) {
                    var attributeName = result[counterx].Attributes[countery].Name;
                    //console.log(attributeName);
                    if (attributeName === 'given_name') {
                        givenName = result[counterx].Attributes[countery].Value;
                    }
                    if (attributeName === 'family_name') {
                        familyName = result[counterx].Attributes[countery].Value;
                    }
                    if (attributeName === 'email'){
                        eMail = result[counterx].Attributes[countery].Value;
                    }
                }
                console.log(givenName + familyName + eMail + userSub);
                var userTable = document.getElementById('user_table');
                var userList = document.createElement('tr');
                userList.innerHTML = '<td class="text-center">' + givenName + ' ' + familyName + '</td><td class="text-center">' + 
                    eMail + '</td><td class="text-center"><span class="label label-primary">' + status + '</span></td><td class="text-center"><div class="btn-group"><button class="btn-default btn btn-xs"><a data-toggle="modal" href="#addStoreForm">Add Store</a></button><button id="editUserModal" value="' + userSub + '" class="btn-default btn btn-xs"><a data-toggle="modal" href="#editUserForm' + counterx + '">Edit User</a></button></div><div id="editUserForm' + counterx + '" class="modal fade" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><form method="patch" role="form"><div class="form-group"><input id="userGivenName" type="text" placeholder="First Name" class="form-control" value="' + givenName + '"></div><div class="form-group"><input id="userLastName" type="text" placeholder="Last Name" class="form-control" value="' + familyName + '"></div><div class="form-group"><input id="userEmail" type="email" placeholder="E-mail" class="form-control" value="' + eMail + '"><input id="userUUID" type="hidden" value="' + userSub + '"><input id="userActiveStatus" type="hidden" value="' + userStatus + '"></div><br><div><button id="editUserBtn" class="btn btn-sm btn-primary m-t-n-xs" type="submit"><strong>Go!</strong></button></div></form></div></div></div></div></td>';
                    document.getElementById('user_table').appendChild(userList);
            }
        }


        $('#editUserBtn').click(function (event) {
            event.preventDefault();
            var userName = $('#userUUID').val();
            var userGivenNameBoxValue = $('#userGivenName').val();
            var userLastNameBoxValue = $('#userLastName').val();
            var userEmailBoxValue = $('#userEmail').val();
            console.log(userGivenNameBoxValue);
            console.log(userLastNameBoxValue);
            console.log(userEmailBoxValue);
            console.log(userStatusBoxValue);
            console.log(userName);
            //var userStatusValue = $('#userStatus').val();
            //editUser (userName, userGivenNameBoxValue, userLastNameBoxValue, userEmailBoxValue);
            $('#editUserForm').modal('hide');
        });

        function editUser (userName, userGivenNameBoxValue, userLastNameBoxValue, userEmailBoxValue) {
            alert("lets run this");
            console.log(givenNameBoxValue);
            console.log(familyNameBoxValue);
            console.log(emailBoxValue);
            $.ajax({
                method: 'PATCH',
                url: _config.api.invokeUrl + '/admin/user/' + userName,
                headers: {
                    Authorization: authToken
                },
                data: JSON.stringify({
                    given_name: userGivenNameBoxValue,
                    family_name: userLastNameBoxValue,
                    email: userEmailBoxValue
                }),
                contentType: 'application/json',
                success: function(result){
                    completeEditUserRequest(result);
                },
                error: function ajaxError(jqXHR, textStatus, errorThrown) {
                    console.error('Error requestUserList: ', textStatus, ', Details: ', errorThrown);
                    console.error('Response: ', jqXHR);
                    alert('An error occured when requesting your user list:\n' + jqXHR);
                }
            });
        }

        function completeEditUserRequest (result) {
            //console.log(result);
            if (result !== []){
                alert("User Details Changed Successfully!");
            } else {
                alert("Error! Please try again.");
            }
        }

如果您看到代码，您将可以清楚地看到我正在动态创建一个表，其中的每一行都有名称，电子邮件，一个用于添加存储的按钮和另一个用于编辑该行/用户的按钮。编辑按钮将打开一个使用PATCH API的模式表单。