Question

我正在使用PHP，MySQL和＆amp ;;创建一个简单的任务管理器应用程序。 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，代码就会中断。
请告诉我们您正在使用的环境。

动态表单不提交（jQuery）

2 个答案: