附加到一个类的原型观察者多次触发

Question

我们只是创建一个 Netflix 风格的队列，通过 AJAX 进行添加、重新排序和删除。这些项目位于 UL 中，并且每个 LI 内都有一个删除链接，并具有用于删除的唯一 ID。请不要关注为什么我们使用文本文件来保存数据等 - 教授将这种不切实际的选择作为要求，以及其他一些选择。

JS：

function softRefresh() {
    $$('.delete').invoke('observe','click',function() { taskDelete(this.id); }); 
    Sortable.create("taskList", { onUpdate: function(list){ saveOrder(list); } });
}

function taskDelete(a) {
    var tempArr = a.split('-');
    var keyToDelete = tempArr[1];
    var output;
    var ajaxRequest = new Ajax.Request("todolist.php",
    {
        method: "post",
        parameters: {
            action: 'delete',
            id: keyToDelete
        },
        onSuccess: function(response) {
            $('taskList').update(response.responseText);
            softRefresh();
        }
    });
}

用于“删除”操作的 PHP：

$jsonOutput = file_get_contents($myFile);
$fetchedArr = json_decode($jsonOutput);
$newArr = array();
foreach($fetchedArr as $key => $task) {
    if(($key != $_POST['id'])) {
      array_push($newArr, $task);                   
    }
}
$jsonOutput = json_encode($newArr);
file_put_contents($myFile, $jsonOutput);
$output = '';
foreach($newArr as $key => $task) {
   $output .= '<li id="list_'.$key.'">';
   $output .= $task;
   $output .= '<a href="#" id="task-'.$key.'" class="delete">X</a>';
   $output .= '</li>';
}
echo $output;

问题是，如果我删除了第二个项目，那么以下所有项目也会删除。通过 Firebug 控制台，我发现这是因为当您单击该类的任何链接（“删除”）时，所有以下侦听器都会触发，并不断删除新列表中的第二项。您能告诉我为什么以及如何设置它，以便它只触发您单击的链接吗？这让我一整天都发疯。我习惯了 jQuery 上的 .click()...现在对 Prototype 非常讨厌。

Answer 1

JS：

如果您

设置好事件

，则不需要softRefresh。同样，

<ul>

元素永远不会被处置或替换，因此只需要一个

Sortable

，无需每次都重新制作。

Event.on('taskList', 'click', '.delete', taskDelete);
Sortable.create("taskList", { onUpdate: saveOrder });

function taskDelete(event, element) {
    var id = element.id;
    var tempArr = id.split('-');
    var keyToDelete = tempArr[1];
    new Ajax.Updater({success: 'taskList'}, "todolist.php",
        {parameters: {
            action: 'delete',
            id: keyToDelete
        }}
    );
}

（原型中的 Ajax 对象已经是 POST，因此不需要指定。使用 Updater 也更简洁。将函数调用包装在匿名函数中没有什么意义，这可能是 jQuery 方式，但是它没有添加任何功能，JavaScript 函数是对象，因此可以这样使用它们。）

PHP：

我觉得

$newArr

浪费了循环和一些内存，所以这里有一个更短的方法。

$jsonOutput = file_get_contents($myFile);
$fetchedArr = json_decode($jsonOutput);

unset($fetchArr[$_POST['id']]);
// Keys are preserved here, if you need to reorder use:
// $fetchedArr = array_values($fetchArr);

$jsonOutput = json_encode($fetchedArr);
file_put_contents($myFile, $jsonOutput);
foreach($fetchedArr as $key => $task) {
    echo '<li id="list_'.$key.'">';
    echo $task;
    echo '<a href="#" id="task-'.$key.'" class="delete">X</a>';
    echo '</li>';
}