Javascript 动态表单未提交（jQuery）

我正在用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;
});
}

函数添加任务（）{
//添加“添加新任务”按钮
$（“添加新项目”）。附录（“子阶段”）；
//输入表单的字符串
var任务形式=“”；
//单击按钮时显示表单
$（'.add new'）。单击（函数（）{
$（task_form）.appendTo（$（this.parent（））；
});
//公布结果
$（'.add new task'）.submit（函数（）{
var new_task=$（'.add new task input[name=new task]'）。val（）；
如果（新任务！=''）{
$.post（'includes/addtasks.php'，{task:new_task}，函数（数据）{
$（'.add new task input[name=new task]'）。val（''；
$（数据）.appendTo（'.task list'）.hide（）.fadeIn（）；
});
}
返回false；
});
}

如果我在index.php文件中对表单进行了硬编码，那么该功能将按预期工作。但是，如果表单是在jQuery中创建的，就像我在这里看到的那样，那么提交时不会发生任何事情。我到处找了找，但没有找到一个有效的解决方案

---

任何建议都将不胜感激！谢谢。

问题是你没有委派活动。您已经在页面加载时设置了提交处理程序，但没有为动态创建的元素设置提交处理程序

更改：

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

致：

现在，事件处理程序已绑定到文档，并将使用

为页面上的任何元素触发。添加新任务

，无论它是否是动态创建的

---

另外，需要注意的是，如果可能，您应该避免绑定到

文档

，而是应该绑定到

最近的静态父元素

请检查此处的小提琴-

这里使用jQuery 1.7.2，答案如下：

$（文档）。在（'submit'，'addnewtask'，function（）{

是用来代替

$（'.addnewtask'）.submit（function（）{

在Javascript控制台（F12）中，您可以看到请求已发送。（显然，我们没有下一页，因此请求未完成。）

如果使用版本低于1.7.2的jQuery，代码将中断。

---

让我们知道您正在使用的环境。

我尝试过这个方法（在一个类似的问题上发现了类似的回答）但这仍然是不可行的。谢谢你的回复。还有其他想法吗？谢谢你的解决方案。问题是我在索引文件中硬编码了表单来测试它。这就是为什么它不起作用的原因…如果我硬编码了表单并动态生成，那么它就会崩溃。在这方面浪费了这么多时间！再次感谢。你试过$（“”）.addClass（“新增”）；

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