Как обнаружить измененный вход из события javascript

Question

Я хочу определить, когда изменяется содержимое поля ввода. Например, это событие кнопки, как я могу обнаружить это изменение?

$('#kunden_plz').on('propertychange change keyup paste input',function(){ 
 
\t console.log("PLZ: "+$(this).val()); 
 
}); 
 

 
$('#change_plz').on('click',function(){ 
 
    $('#kunden_plz').val("12345"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <label>Plz: </label> 
 
\t <input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text" /> 
 
    </li> 
 
</ul> 
 
<button id="change_plz" type="button">Change</button>

Я надеюсь, что кто-то есть идея, за исключением этого:

<button id='btn'>Click Me</button> 
<input type='hidden'id='txtVar' value=''/> 

$("#btn").click(function(){ 
    $("#txtVar").val("1234").change(); 
}); 

$(document).on('change', '#txtVar', function() { 
    alert("called"); 
}); 

Answer 1

событие не будет срабатывать при изменении их программно. Однако .trigger(event)/.triggerHandler(event) может использоваться для запуска события.

$('#kunden_plz').on('propertychange change keyup paste input',function(){ 
 
\t console.log("PLZ: "+$(this).val()); 
 
}); 
 

 
$('#change_plz').on('click',function(){ 
 
    $('#kunden_plz').val("12345").trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <label>Plz: </label> 
 
\t <input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text" /> 
 
    </li> 
 
</ul> 
 
<button id="change_plz" type="button">Change</button>

Второй вариант опрос Не рекомендуется

var previousVal; 
 
var pollInterval = setInterval(function() { 
 
    var val = $('#kunden_plz').val(); 
 
    if (val !== previousVal) { 
 
     // It changed 
 
     console.log("PLZ: "+val); 
 
    } 
 
    previousVal = val; 
 
}, 100); 
 

 
$('#change_plz').on('click',function(){ 
 
    $('#kunden_plz').val("12345").trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <label>Plz: </label> 
 
\t <input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text" /> 
 
    </li> 
 
</ul> 
 
<button id="change_plz" type="button">Change</button>