Jquery .live問題

Question

我有以下代碼片段。

HTML（簡化）：

<tr> 
    <td><div id="insert_24" class="insert">Invoegen</div></td> 
    </tr> 

在其上JS功能正在運行（簡化）來檢索從表單中的數據，將其添加到數據庫中，然後用正確的類更新的形式/表&的ID：

$(".insert").click(function() { 
     // current field, is the id: insert_24 
     // layer is retrieved in the function: 24 
     // Full table has the id 'canvas' 

     // do something 
     // Insert into database 

     console.log('insert-'+layer); 
     $("#"+ current_field).removeClass("insert").addClass("delete").html('delete').attr('id', 'delete_'+layer); 
     $("table#canvas tr:last").attr('id', 'row_'+layer); 
    }); 

後直接這段代碼我也有代碼，以刪除線（簡體）：

$(".delete").live("click", function() { 
     // do something 
     // Insert into database 

     console.log('delete-'+layer); 
     $("#row_"+ layer).remove();   
    }); 

插入工作正常，但是當我查看控制檯日誌函數時，在'insert'上，'delete'函數在插入後直接觸發，這是沒有意義的。我只點擊了<div>一次。

我錯過了哪個步驟/設置讓此功能以正確的方式工作？

Answer 1

更新您的click()處理程序return false;，或：

$(".insert").click(function(e) { 
    e.stopPropagation(); 
    // your code here 
}); 

.live()作品在文檔級附加處理程序，並等待事件冒泡 - 此時，它檢查是否原始目標元素相匹配的您使用的選擇器。所以當點擊發生時，它首先觸發（非實時）點擊處理程序，然後起泡以觸發活動處理程序。

另請注意，從元素中移除"insert"類不會阻止您的點擊處理程序擊中該元素。你需要解除綁定點擊處理程序（從處理程序中）或將其更改爲活動處理程序。

請注意，.live()是過時的方式。您應該更新以使用.on() method的委託語法。

Answer 2

試試這個：

$(".insert").click(function(e) { 
    e.stopPropagation(); 
    // current field, is the id: insert_24 
    // layer is retrieved in the function: 24 
    // Full table has the id 'canvas' 

    // do something 
    // Insert into database 

    console.log('insert-'+layer); 
    $("#"+ current_field).removeClass("insert").addClass("delete").html('delete').attr('id', 'delete_'+layer); 
    $("table#canvas tr:last").attr('id', 'row_'+layer); 
}); 

發生了什麼事是，點擊事件冒泡到文檔中。 .live()在文檔上有一個處理程序，用於檢查事件的目標是否與選擇器匹配。點擊處理程序完成後，DIV的類已更改爲delete，因此此檢查成功，並運行處理程序。