原型觀察員連接到一個類多次發射

預先感謝您的幫助球員。我認爲自己非常精通jQuery，但是當我幫她的Prototype做家庭作業時，這讓我大吃一驚。她無法及時解決問題，所以這沒有什麼意義，但爲了我的理智，我希望你能告訴我發生了什麼事情。原型觀察員連接到一個類多次發射

我們只是簡單地創建了一個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;

的問題是，如果我刪除了，比方說，第二項，以下所有項目將刪除爲好。通過螢火蟲控制檯，我發現這是因爲當你點擊該類的任何鏈接（'delete'）時，所有下列偵聽器都會觸發，並且不斷刪除第二個項目。你能告訴我爲什麼以及如何設置它，因此它只會觸發你點擊的鏈接？它整天驅使我堅果。我習慣於在jQuery上使用.click（）...此刻對Prototype非常仇恨。

再次感謝！

來源

2011-07-06 user831079

JS：

你應該不需要softRefresh如果你set the events well。同樣，<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 
     }} 
    ); 
}

（原型阿賈克斯對象已經職位，並不需要指定。一個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>'; 
}

來源

2011-07-06 12:32:44 clockworkgeek

原型觀察員連接到一個類多次發射

回答

相關問題