無法從jQuery的形式發布數據到PHP

Question

我想在用戶提交后將表單的數據發布到php。 問題是表單是由ajax中的jquery創建的。

創建的表單如下所示：

$.ajax({
            type: "POST",
            url: "myphp.php",
            data: {label: label},
            success: function(result) {
                    for (i = 0; i<result.item.length; i++){

                        var itemData= result.item[i].itemData;

                        var div = $("<div class ='detail'></div>");
                        // the form will not be displayed, until the parent div has been clicked.  
                         var form = $("<form/>", {// create the form
                            class: 'itemClass',
                            id: 'itemId',
                            method: 'POST'
                            }).append(
                            // Create <form> Tag and Appending in Div .detail.
                            $("<p/>").text("item:"),$("<br/>"), 
                            $("<input/>", {
                            type: 'text',
                            id: 'itemData',
                            name: 'itemData',
                            value: itemData
                            }), 
                            $("<br/>"), 
                            $("<input/>", {
                            type: 'submit',
                            id: 'submit',
                            value: 'Submit'
                            }))

                        div.append(form);
                         $("#htmlDiv").append(div);
                       }

                },
            dataType: "json",
            error: function(xhr){
                console.log("error");
               }
      });
    });

但是，提交代碼失敗。 它沒有被執行。

$("#itemId").submit(function(e) {
        e.preventDefault();
        var itemData= $('#itemData').val();
        $.ajax({
            type: "POST",
            url: "target.php",
            data: {itemData: itemData},
            success: function(result) {
                alert(result); //It return a string
                },
            dataType: "text",
            error: function(xhr){
                console.log("error");
               }
      });

任何想法？ 為什么提交不能使用？

Answer 1

在事件附加時使用event-delegation （ $("#itemId").submit(function(e){... ），目標元素（ $("#itemId") ）在DOM不存在

Event delegation使我們可以將single event listener附加到父元素，該元素將為與選擇器匹配的所有后代觸發，無論這些后代現在存在還是將來添加。

嘗試這個：

$('#htmlDiv').on('submit', '#itemId', function(e) {
  e.preventDefault();
  var itemData = $('#itemData').val();
  $.ajax({
    type: "POST",
    url: "target.php",
    data: {
      itemData: itemData
    },
    success: function(result) {
      alert(result); //It return a string
    },
    dataType: "text",
    error: function(xhr) {
      console.log("error");
    }
  });
});