Dynamic form not submitting (jQuery)

问题

I'm creating a simple task manager app with PHP, MySQL, & jQuery. I'm adding a feature that will allow users to add a task by clicking a "new task" button, typing into a text field and hitting enter. This is the jQuery I have:

function add_task() {
// Add the "add new task" button
$("<span class='add-new'>Add new item</span>").appendTo(".sub-phase");

// String for the input form
var task_form = '<form class="add-new-task" autocomplete="off"><input type="text" name="new-task" placeholder="Add a new item..." /></form>';

// Display form on button click
$('.add-new').click(function() {
    $(task_form).appendTo($(this).parent());
});

// Post results
$('.add-new-task').submit(function(){
var new_task = $('.add-new-task input[name=new-task]').val();

if(new_task != ''){
$.post('includes/add-tasks.php', { task: new_task }, function( data ) {
    $('.add-new-task input[name=new-task]').val('');
    $(data).appendTo('.task-list').hide().fadeIn();
        });
}
return false;
});
}

If I have the form hardcoded in the index.php file, this functionality works as expected. But if the form is created in jQuery like I have it here, then nothing happens on submit. I've searched around but haven't been able to find a solution that works.

Any advice is much appreciated! Thank you.

回答1:

The issue is that you're not delegating the event. You've setup a submit handler on page load, but not for dynamically created elements.

Change:

$('.add-new-task').submit(function(){

To:

$(document).on('submit', '.add-new-task', function(){

Now the event handler is bound to the document and will trigger for any element on the page with .add-new-task regardless of whether or not it was dynamically created.

Also, of note, you should avoid binding to document where possible, and instead, should bind to the closest static parent element.

回答2:

Please check the fiddle here - http://jsfiddle.net/kunaldethe/TQa97/

Here jQuery 1.7.2 is used and as answered by Ohgodwhy,

$(document).on('submit', '.add-new-task', function(){

is used instead of

$('.add-new-task').submit(function(){

In the Javascript Console (F12), you can see the request is sent. (Obviously we don't have the next page, so the request is not completed.)

If you use the jQuery with version less then 1.7.2, the code breaks.
Let us know, the environment you are using.

来源：https://stackoverflow.com/questions/23330960/dynamic-form-not-submitting-jquery

标签

javascript

php

jquery

mysql

forms