jQuery序列化Ajax加载的表单

Question

The serialize() function returns an empty string , This is my code :

Code to return form :

    $.ajax({ 
            url: 'api/form',
            type: 'get',
            crossDomain: true,
        }).done(function(response){
            fields = JSON.parse(response);
            html = '';
            $.each(fields, function(index,field){
                html += field;
            });

            html += '<div class="btn-clear"></div><button class="btn payment">Pay</button></div>';
            $("#cart-content").html(html);
        }).fail(function() {
            console.log('Failed');
        });

Javascript code executed after user clicks payment button :

$("body").on('click','.payment',function() {
    var frmData = $("#customer").serialize();
    console.log(frmData); 
});

But it log an empty string !!

The form after it's ajax loaded :

<form id="customer"><div class="form-group">
                    <label class="control-label">Full name</label>
                    <input name="name" class="form-control" type="text">
                </div><div class="form-group">
                    <label class="control-label">E-mail</label>
                    <input name="email" class="form-control" type="text">
                </div><div class="form-group">
                    <label class="control-label">Mobile</label>
                    <input name="mobile" class="form-control" type="text">
                </div><div class="form-group">
                    <label class="control-label">Country</label>
                    <select id="country" name="country" class="form-control" type="text"><!-- countries ... --></select>
                </div></form>

Answer 1

Try your serialize like this

$("#form").submit(function () {
    var data = $('#form').serialize();

Use the form ID as the target. Here I used #form. Submit the form, serialize the forms inputs.