Question

我有一个通过以下操作创建的表单，

USER选择一个链接
使用$（＆＃39;＃livesearch＆＃39;）。（＆＃39;点击＆＃39;，＆＃39; a＆＃39;，功能（e）{}）;通过AJAX调用
基于响应数据，它填充bootstrap 3模态窗口中的内容div
在通过javascript填充的模态窗口中，我有另一个表单字段用于提交，
在这个表单字段中，我试图通过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

尝试以下内容：

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

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

但话又说回来，我有另一个问题......如果模态窗口已经填充了表单，直接绑定方法应该可以正常工作吗？对于直接和委托约束意味着什么仍然是多云的......两者之间的区别是什么，

通过另一个AJAX生成的表单字段的AJAXing

2 个答案: