动态表单不提交（jQuery）答案

【问题标题】：Dynamic form not submitting (jQuery)动态表单不提交（jQuery）
【发布时间】：2014-04-28 00:55:33
【问题描述】：

我正在使用 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 中创建的，就像我在这里一样，那么提交时不会发生任何事情。我四处搜索，但未能找到可行的解决方案。

非常感谢任何建议！谢谢。

【问题讨论】：

你试过 $('').addClass('add-new');

标签： javascript php jquery mysql forms

【解决方案1】：

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

变化：

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

收件人：

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

现在事件处理程序已绑定到文档，并将触发页面上带有.add-new-task 的任何元素，无论它是否是动态创建的。

另外，值得注意的是，您应该尽可能避免绑定到document，而是应该绑定到closest static parent element。

【讨论】：

我已经尝试过了（在类似问题上找到了类似的回复），但仍然不行。不过感谢您的回复。还有其他想法吗？
感谢您的解决方案。问题是我在索引文件中硬编码了表格来测试它。这就是它不起作用的原因......如果我对其进行硬编码并使其动态生成，那么它就会中断。浪费了这么多时间！再次感谢。

【解决方案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，代码会中断。
让我们知道您正在使用的环境。

【讨论】：