檢測html中的更改

Question

我正在使用CodeIgniter開發應用程序，並且希望檢測DOM中的某些元素何時發生更改。假設我有以下內容：

<input type="text" name="idPerson0" id="idPerson" value="<?= $idPerson0; ?>" style="width: 150px;"/> 
<input type="text" name="idPerson1" id="idPerson1" value="<?= $idPerson2; ?>" style="width: 150px;"/> 
<input type="text" name="idPerson2" id="idPerson2" value="<?= $idPerson2; ?>" style="width: 150px;"/> 

$idPerson0, $idPerson1, $idPerson2已設置。然後，我想在任何人更改時顯示工具提示，顯示原始值，但如果我決定再次輸入原始值，屬於相應輸入的工具提示應該消失。

目前，我正在使用JQuery，但有一個「驗證」按鈕。

$('#btn-verify').click(function() { 
    var old_id0 = "<?= $idPersona0 ?>"; 
    var old_id1 = "<?= $idPersona1 ?>"; 
    var old_id2 = "<?= $idPersona2 ?>"; 


    var new_id0 = $("#idPersona0").val(); 
    var new_id1 = $("#idPersona1").val(); 
    var new_id2 = $("#idPersona2").val(); 

    if (old_id0 != new_id0){ 
     // show tooltip 
    } else { 
     // hide tooltip 
    } 

    // the other ifs 
} 

我想有一種「實時方式」來顯示工具提示和檢查差異。

Answer 1

你可以開槍的變化事件的功能，jQuery中：綁定到輸入

$("#idPerson0,#idPerson1,#idPerson2").change(function(){ 
    var old_id0 = "<?= $idPersona0 ?>"; 
    var old_id1 = "<?= $idPersona1 ?>"; 
    var old_id2 = "<?= $idPersona2 ?>"; 


    var new_id0 = $("#idPersona0").val(); 
    var new_id1 = $("#idPersona1").val(); 
    var new_id2 = $("#idPersona2").val(); 

    if (old_id0 != new_id0){ 
     // show tooltip 
    } else { 
     // hide tooltip 
    } 

    // the other ifs 
}