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