javascript - When the form added by jq append() is then submitted using ajax, the submitted elements of the form cannot be obtained

Question

<p class="add">添加步骤</p>
<script type="text/javascript" src="__PUBLIC__/js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">


var i = 0;
$('.add').on('click',function(){ //添加步骤
    if(i==0){
        alert('ok');
    }

    i++;
    $('.wrap').append('<p class="pp">步骤'+i+'</p><form action="" class="pic_upload" enctype="multipart/form-data"><label> <input type="file" name="card" style="display:none" onchange="preview_local_image(this)"><img src="__PUBLIC__/img/uploadimg.png" alt=""></label><input type="text" value="'+i+'" style="display:none"><textarea name="" id="" cols="30" rows="10" placeholder="请写下你的步骤。。。。"></textarea><p class="btn"><p class="save">保存</p></form>');


});


$('.wrap').on('click','.save',function(){ //保存到数据库
    var formData = new FormData($('.pic_upload')[0]);
    // console.log($('#form')[0]);
    console.log(formData);
    $.ajax({
        url:'__CONTROLLER__/save_step',
        type:'POST',
        data:formData,
        async: false,    
          cache: false,    
          contentType: false,    
          processData: false,   
        success:function(json){
            // if(json.info == "ok"){
            //     alert('上传成功');
                
            // }else{
            //     alert('上传失败');
            // }
            // alert(json);
        }
    });
return false;
});
</script>

Answer 1

Firebug grab the package of ajax() process and take a look.

If jq is initialized before the html code of append(), the initialization will be unsuccessful.

Answer 2

The FormData method seems not to be used in this way.