jQuery點擊偵聽器不應該觸發

Question

使用下面的代碼塊時，當我第一次按#transfer-button時，它會用正確的對話框發出警報，但在刷新頁面之前再次執行時，它會繼續點擊第一個對話框直到點擊最後一個對話框。例如，我按下了「WIlliam」，它會出現一個對話框，顯示「William」，然後我按下「Lucy」並彈出一個對話框，顯示「William」會彈出，然後一旦關閉，「Lucy」會立即彈出以及。我該如何解決？

$("#person1").click(function() { 
$("#transfer-info").html("Transfer to Lucy."); 
$("#transfer-button").click(function() { 
    alert("Lucy"); 
}) 
}) 
$("#person2").click(function() { 
$("#transfer-info").html("Transfer to William."); 
$("#transfer-button").click(function() { 
    alert("William"); 
}) 
}) 

Answer 1

切換時，你只需添加另一個事件偵聽器，所以你最終有多個事件偵聽器，與他們兩個射擊。

你可以做這樣的事情。

$("#person1").click(function() { 
    $("#transfer-button").unbind('click'); 
    $("#transfer-info").html("Transfer to Lucy."); 
    $("#transfer-button").click(function() { 
     alert("Lucy"); 
    }); 
}); 

$("#person2").click(function() { 
    $("#transfer-button").unbind('click'); 
    $("#transfer-info").html("Transfer to William."); 
    $("#transfer-button").click(function() { 
     alert("William"); 
    }); 
}); 

Answer 2

嘗試

$("#person1").click(function() { 
$("#transfer-info").html("Transfer to Lucy."); 
$("#transfer-button").off('click') 
$("#transfer-button").click(function() { 
    alert("Lucy"); 
}) 
}) 
$("#person2").click(function() { 
$("#transfer-info").html("Transfer to William."); 
$("#transfer-button").off('click') 
$("#transfer-button").click(function() { 
    alert("William"); 
}) 
})