Jquery on Input not working on dynamically inserted value

Question

I'm trying to alert a value using jquery when it is generated from a javascript code, the value is generated on the input box the problem is jquery cannot detect the changes, commands i tested are "change, input" but when i manually input a value jquery triggers

sample code:

value is dynamically generated on the javascript and pushed / inserted to the inputbox, the value is not manually generated javascript:

document.getElementById("displayDID").value = DisplayName ;

html:

<input type="text" id="displayDID" />

jquery:

$('#displayDID').on("input" ,function() {
            var work = $(this).val();
            alert(work);
        });

the value of the id="displayDID" changes but jquery cannot detect it after execution.

sample fiddle http://jsfiddle.net/SU7bU/1/

Solution 1

add trigger to it

$('#gen').on('click',function() {
    $('#field').val('val').trigger("change");
});


$(document).on("change",'#field' ,function() {
    var work = $(this).val();
    alert(work);

});

http://jsfiddle.net/ytexj/

Solution 2

It is because you have added the script before input is ready.Due to which, event is not getting set on that element.write the code on document ready:

$(document).ready(function(){
 $('#displayDID').on("input" ,function() {
        var work = $(this).val();
        alert(work);
    });
})

or use event delegation:

$(document).on("input",'#displayDID' ,function() {
        var work = $(this).val();
        alert(work);
    });