Serialize dynamically created form // Post ajax request

Question

I have some dynamically created content which includes a little form (dropdown with button) to assign someone to a task.

Using jquery, I want to update my database with the newly assigned person. My approach:

$('#messageDetail').on('click', '#assignButton', function() {
    $.ajax({
        url: "admin_assginMessage.php",
        type: "post",
        data: $("#assignForm").serialize(),
        success: function (data) {
            alert("Success!");
        },
        error: function() {
            alert("Error!");
        }
    });
});

It seems it doesn't send me the form input. I have the feeling that I need to use .on() here, too, but I don't know which event I should choose:

    data: $("#assignForm").serialize(),

Thanks for all answers!

Answer 1

If you are saying "I created a form as a dynamically, but when I trying to serialize it, I can't see anything about dynamic form's data", the solution is here:

const dynamicForm = `
	<form id="frmData" onsubmit="return false">
	<label>Username
	<input type='text' name='username' />
	</label>

	<label>Password
	<input type='password' name='password' />
	</label>
	<button id="clickSend">Click and Send</button>
	</form>
`;

$("#addForm").on("click", () => {
	$("#frmarea").append(dynamicForm);
})

/* Send Form Details with Dynamic Form */

$(document).on("click", "#clickSend", () => {
	let serializeData = $("#frmData").serialize()
	
	console.log(serializeData)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="frmarea"></div>

<button id="addForm">Add Form</button>

So you should use $(document) when you work with dynamic generated forms.