当追加表单提交不起作用时

Question

Here I created two forms: http://jsfiddle.net/sxGtM/4729/ when you submit a form ... data change to JSON

$(document).ready(function(){
$("#test").append("<form action='' method='post'> <br>");
$("#test").append("test <input type='radio' name='test' value='test'> <br>");
$("#test").append("<input type='submit'> <br>");
$("#test").append("</form>");
});

The first is created in html and it works well, but the second is created in javascript with append and when you submit a form ... it is doing nothing

Could you look at my code and write me a correct code?

Answer 1

Problem with you code is append is appending the form element as a whole ie, and the remaining elements are appended after form element. your resulting html structure is something like this.

<p id="test">
    <form action="" method="post"> <br>
    </form>
        test <input type="radio" name="test" value="test"> <br>
        <input type="submit"> <br>
</p>

So use .html() method to set the html content as a whole like below.

$(document).ready(function(){
    $("#test").html("<form action='' method='post'> <br> test <input type='radio' name='test' value='test'> <br> <input type='submit'> <br></form>");
});

one more thing is that submit wont be bindable to the dynamically created elements. So use .on() delegates.

Code:

$('body').on('submit','form',function() {
        data = JSON.stringify($(this).serializeObject());
        $('#json').append(data);
        return false;
});

Fiddle

Answer 2

you have a couple of things wrong...

firstly, the html you append needs to be complete - by appending the opening and closing form tags separately the dom will consider it text. you should probably consider appending the whole form at once or building it up as separate element.

secondly, you are appending the form after you've bound the submit method - you will need to bind the submit method after the form has been added to the dom - again there are lots of ways you could go about doing this but a simple way is to have a function which you can call to bind your form.

see:

http://jsfiddle.net/w5anU/1/

$.fn.serializeObject = function(){
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
bindForms();
});

function bindForms() {
        $('form').submit(function() {
        data = JSON.stringify($('form').serializeObject());
        $('#json').append(data);
        return false;
    });
}

$(document).ready(function(){
$("#test").append("<form action='' method='post'> <br>test <input type='radio' name='test' value='test'> <br><input type='submit'> <br></form>");
bindForms();    
});

Answer 3

Thats because the following command :

$("#test").append("<form action='' method='post'> <br>");

also immediately adding a closing tag .

you should create a tag, append it to #test, and then append all the rest elements to the element. (not to the #test element)