Наблюдатели-прототипы прикреплены к классу стрельбы несколько раз

Question

Заранее спасибо за помощь, ребята.Я считаю себя достаточно хорошо разбирающимся в jQuery, но, поскольку я помогал своей сестре с ее домашней работой по прототипу, это расстроило меня до чертиков.Она не могла решить во время, так что это спорный вопрос, но ради моего здравомыслия, я надеюсь, что вы можете сказать мне, что происходит.

1002 * Мы просто создаем очередь Netflix стиля с оным, изменить порядок и удалять с помощью AJAX,Элементы были в UL и имели ссылку для удаления внутри каждого LI с уникальными идентификаторами, которые будут использоваться для удаления.Пожалуйста, не зацикливайтесь на том, почему мы использовали текстовые файлы для сохранения данных и т. Д. - ее профессор сделал этот непрактичный выбор требованием наряду с несколькими другими ...

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 для действия 'delete':

$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;

Проблема заключалась в том, что если бы я удалил, скажем, 2-й элемент, все следующие элементы также удалились бы.Через консоль firebug я узнал, что это происходит потому, что при нажатии на любую ссылку этого класса («delete») все последующие слушатели запускаются и продолжают удалять 2-й элемент из нового списка.Можете ли вы сказать мне, почему и как я могу установить его так, чтобы он срабатывал только по нажатой ссылке?Это сводило меня с ума весь день.Я привык иметь .click () на jQuery ... на данный момент сильно ненавижу 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>';
}