動態表單未提交（jQuery）

Question

我正在使用PHP，MySQL和jQuery創建一個簡單的任務管理器應用程序。 我添加了一項功能，該功能將允許用戶通過單擊“新任務”按鈕，在文本字段中鍵入並按Enter鍵來添加任務。 這是我擁有的jQuery：

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;
});
}

如果我在index.php文件中對表格進行了硬編碼，則此功能可以按預期工作。 但是，如果表單是像我在此處那樣在jQuery中創建的，則提交時不會發生任何事情。 我到處搜尋，但找不到有效的解決方案。

任何建議深表感謝！ 謝謝。

Answer 1

問題是您沒有委派活動。 您已經在頁面加載時設置了一個提交處理程序，但是沒有為動態創建的元素設置一個處理程序。

更改：

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

至：

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

現在，事件處理程序已綁定到文檔，並且無論是否動態創建該事件處理程序，都將使用.add-new-task觸發頁面上的任何元素。

另外，值得注意的是，應盡可能避免綁定到document ，而應綁定到closest static parent element 。

Answer 2

請在此處檢查小提琴-http: //jsfiddle.net/kunaldethe/TQa97/

在這里使用jQuery 1.7.2，並由Ohgodwhy回答，

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

用於代替

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

在Javascript控制台（F12）中，您可以看到請求已發送。 （顯然我們沒有下一頁，因此請求未完成。）

如果使用版本低於1.7.2的jQuery，代碼將中斷。
讓我們知道您所使用的環境。