0

todo リストフォームをコーディングしようとしています。このフォームには無制限の行を含めることができます。各行には、横に 2 つのボタンがあるテキスト入力フィールドが含まれています。ボタンの 1 つは新しい行を下に追加し、2 番目のボタンは行を削除します。

問題は、追加ボタンを何度もクリックすると、その行の削除アイコンをクリックすると、その下に追加されたすべての要素が削除されることです。

私は理にかなっていることを願っています。多分コードは何が起こっているのかを説明します。

Todo リスト フォーム ページの 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 要素を削除する必要があります。単に削除ボタンの親と連携するだけで、parent() で「.field」を指定する必要はありません。

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