AJAXing通过另一个AJAX

Question

我有以下操作创建一个表单生成的表单域，

1. 用户选择链接
2. 使用$（“＃实况搜索”），在（“点击”， 'a'，函数（e）{}）;访问并会从MySQL数据库通过.PHP通过AJAX调用一些信息
3. 基于响应数据，它填充内容的div自举3模态窗口中通过JavaScript填充模态窗口
4. ，我有另外一个表单域提交，
这个表单字段
5. ，我试图做的，通过AJAX调用一个POST /响应，它只是带我到PHP页面，并没有做任何事情..

假设是不可能的到另一个AJAX调用动态生成的表单字段上的AJAX？

更详细的讲解，我已经包括下面在这里我的代码，

的点3和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); 
    } 
}); 

}）;

为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

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); 
    }); 
}); 

不过话又说回来，我还有一个问题...如果模态窗口已经填充w在形式上，直接绑定方法应该正常工作吗？仍然是什么样的直接和委托绑定意味着什么..以及两者之间的区别是什么，

Answer 2

尝试像下面：

$("#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); 
}); 
}); 

这将仍然与不上的初始页面加载存在，因为.on()声明的DOM元素的工作。

也是它不是傻像错字：

postData = $(measure_quantity).serialize(); 

应该是...

postData = $("#measure_quantity").serialize();