无法从jquery的表单

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附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。 / em>的

试试这个：

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