检测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 
}