複数回点火するクラスに取り付けられたプロトタイプオブザーバー

Question

あなたの助けを借りてくれてありがとうございます。 私はjQueryにかなり精通していると思っていますが、Prototypeの宿題で妹を助けていた時、これは私を挫折させました。彼女は間に合ってそれを解決することができませんでしたが、私の正気のために、何が起こっているか教えてください。

単純に、AJAXによって追加、並べ替え、削除を行うnetflix形式のキューを作成していました。アイテムはUL内にあり、削除に使用される一意のIDを持つ各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を「削除」アクションのために：

$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コンソールを通して、そのクラスのリンク（「削除」）をクリックすると、次のすべてのリスナーが起動し、2番目のアイテムを新しいリストから削除し続けるため、これが見つかった。どうして、どのようにしてそれを設定して、あなたがクリックしたリンクだけを発火させるのか教えてください。私は一日中ナッツを運転しました。私はjQueryで.click（）を使用することに慣れています...現時点でPrototypeに対する憎しみは大いにあります。

おかげで再び！

Answer 1

JS：

あなたset the events well場合は、softRefreshを必要はありません。同様に、<ul>要素は決して廃棄も置換もされないので、1つだけ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>'; 
}