0

我正在尝试编写待办事项列表表单。此表单可以包含无限行。每行都包含一个文本输入字段，旁边有 2 个按钮。第一个按钮在下面添加一个新行，第二个按钮删除该行。

问题是，当我多次单击添加按钮时，当我单击该行的删除图标时，它会删除在其下方添加的所有元素。

我希望我有道理，也许代码会解释发生了什么。

下面是 todo-list 表单页面的 PHP 代码：

<div class="table table-todo">

    <?php include 'projects-add-task.php'; ?>

</div>

以下是 的内容projects-add-task.php：

<div class="field">
<input type="text" name="task[]" />
<a href="#" title="Add Task Below" class="todo-add"><img src="images/icon-todo-add.png" alt="" onmouseover="this.src='images/icon-todo-add-h.png'" onmouseout="this.src='images/icon-todo-add.png'" /></a>
<?php if ($_GET['show_delete'] == 'yes') { ?>
<a href="#" title="Delete This Task" class="todo-delete"><img src="images/icon-todo-delete.png" alt="" onmouseover="this.src='images/icon-todo-delete-h.png'" onmouseout="this.src='images/icon-todo-delete.png'" /></a>
<?php } ?>
<div style="clear: both;"></div>
</div>

这是不能 100% 正确工作的 jquery：

$('.todo-add').live('click', function (e) { 
    e.preventDefault();
    $parent = $(this).parent('.field');     
    $.get('projects-add-task.php?show_delete=yes', function (data) { $parent.append(data); }, 'html');
});

$('.todo-delete').live('click', function (e) {  
    e.preventDefault();
    $(this).parent('.field').remove();
});

我不得不使用live图标.todo-add，因为它显然不适用于新附加的行。但是我不确定这是否对.todo-delete图标是必要的，但我这样做只是为了确定。

对此问题的任何帮助将不胜感激。

4

2 回答 2

0

我认为你需要after而不是append：

function (data) { $parent.append(data); }

应该

function (data) { $parent.after(data); }

此外，live现在实际上已弃用。你应该使用on.

于 2012-11-19T02:11:53.787 回答
0

您正在添加许多带有“字段”类的 div，然后要求 jquery 在删除按钮上删除它们。

您需要为每一行拥有唯一的 ID，然后删除该 ID 元素 os 只需与删除按钮的父级一起使用，无需在 parent() 中指定“.field”

$('.todo-delete').live('click', function (e) {  
    e.preventDefault();
    $(this).parent().remove();
});
于 2012-11-19T02:13:51.783 回答