AJAXing of a form field generated via another AJAX - php

Question

I have a form created from the following action,
USER selects a link
using $('#livesearch').on('click', 'a', function(e){}); accesses and gets some information from MySQL db through .php via AJAX call
based on the response data, it populates the content div in the bootstrap 3 modal window
in the modal window populated via javascript, I have another form field for submission,
in this form field, I'm trying to do a POST/Response through AJAX call and it just takes me to the php page and not doing anything..
suppose is it not possible to AJAX on a form field dynamically generated by another AJAX call?
to explain in more detail, I've included my codes here below,
for point 3 and 4,
// AJAX call from a link selected
$('#livesearch').on('click', 'a', function(e) {
var selectedValue = $(this).attr("value");
$.ajax({
type: 'POST',
async: true,
url: "../../../avocado/private/functions/measures.php",
data: {name:selectedValue},
success: function(data, status){
var selectedData = JSON.parse(data);
console.log(selectedData);
// populates contents for the modal body
$.each( selectedData, function( i, val ) {
document.getElementById("measures").innerHTML+= "<table class=\"table table-condensed\">"
+ "<tr><th>desc1</th><td>"+selectedData[i][6]+"</td><td rowspan=\"4\">Quantity"
+ "<form role=\"form\" action=\"../../../avocado/private/functions/food_save.php\" id=\"measure_quantity\" method=\"POST\">"
+ "<div class=\"form-group\">"
+ "<label class=\"sr-only\" for=\"quantity\">quantity</label>"
+ "<input type=\"Number\" name=\"quantity\" class=\"form-control\" id=\"quantity\" placeholder=\"desc"+i+"\">"
+ "<input type=\"hidden\" id=\"food_name\" name=\"food_name\" value=\""+selectedValue+"\">"
+ "<input type=\"hidden\" name=\"food_type\" value=\"nutrients\">"
+ "<input type=\"hidden\" name=\"food_id\" value=\""+selectedData[i][0]+"\">"
+ "<input type=\"hidden\" name=\"measures_id\" value=\""+selectedData[i][4]+"\">"
+ "<input type=\"hidden\" name=\"grams\" value=\""+selectedData[i][10]+"\">"
+ "</div>"
+ "<button type=\"submit\" class=\"btn btn-default\">Save</button>"
+ "</form>"
+ "</td></tr>"
+ "<tr><th>desc2</th><td>"+selectedData[i][7]+"</td></tr>"
+ "<tr><th>desc3</th><td>"+selectedData[i][8]+"</td></tr>"
+ "<tr><th>desc4</th><td>"+selectedData[i][9]+"</td></tr>"
+ "<tr><th>(g)</th><td>"+selectedData[i][10]+"</td></tr>"
+ "</table>";
});
},
error: function(xhr, status, err) {
alert(status + ": " + err);
}
});
});
for point 5,
$('#measure_quantity').submit(function(){
postData = $(measure_quantity).serialize();
$.post("../../../avocado/private/functions/food_save.php",postData+'&action=submit&ajaxrequest=1',function(data, status){
$("#measure_quantity").before(data);
});
});

Answer 1

Try something like the below:
$( "#measure_quantity" ).on( "submit", function( event ) {
event.preventDefault();
postData = $("#measure_quantity").serialize();
$.post("../../../avocado/private/functions/food_save.php",postData+'&action=submit&ajaxrequest=1',function(data, status){
$("#measure_quantity").before(data);
});
});
This will still work with dom elements that do not exist on the initial page load because of the .on() statement.
Also its not something silly like the typo:
postData = $(measure_quantity).serialize();
Should be...
postData = $("#measure_quantity").serialize();

Answer 2

I have found the problem, for dynamically loaded contents such as this case, I have to add a selector parameter otherwise the event is directly bound instead of delegated, which only works if the element already exists (so it doesn't work for dynamically loaded content
$(document.body).on('submit', '#measure_quantity' ,function(e){
console.log("heeeellllo");
e.preventDefault();
var postData = $("#measure_quantity").serialize();
$.post("../../../avocado/private/functions/food_save.php",postData+'&action=submit&ajaxrequest=1',function(data, status){
$("#measure_quantity").before(data);
});
});
But then again, I have another question... if the modal window has already been populated with the form, direct bound method should work fine right? still kind of cloudy on what direct and delegated bound means.. and what the difference between the two is,