javascript - Jquery on Input not working on dynamically inserted value - Stack Overflow

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, mands 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 /

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, mands 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/SU7bU/1/

• javascript
• jquery
• input
• alert

Share Improve this question Follow edited Sep 19, 2014 at 19:32 tshepang 12.5k2525 gold badges9797 silver badges139139 bronze badges asked Feb 14, 2014 at 10:33 user3261755user3261755 8111 gold badge22 silver badges66 bronze badges 5

• it works fine: jsfiddle/paRPL/1 – caramba Commented Feb 14, 2014 at 10:37
• What about to change "input" to 'keyup' if you want to alert every changes, or to 'change' if you want to alert the changes after focusout – Pavlo Commented Feb 14, 2014 at 10:37
• it works fine on manual input, but doesnt when the value is pushed from javascript – user3261755 Commented Feb 14, 2014 at 10:38
• Try this one: $('#displayDID').val('some value').change(); - this should fire you onchange event. – Pavlo Commented Feb 14, 2014 at 10:42
• I think this is what you are looking for: jsfiddle/LGAWY/141 more information on this link, see Davids answer: stackoverflow./questions/1443292/… – caramba Commented Feb 14, 2014 at 12:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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/ytexj/

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);
    });

Ok I will propose you one answer and let's see if it solve your problem. If you use keyup, and you insert 3350 value, you will display 4 alert, and I think you want to display only 1 alert.

$(document).ready(function() {
var interval;
	$("#variazioneAnticipo").on("input", function() {
		var variazioneAnticipo = $("#variazioneAnticipo").val();
		clearInterval(interval);
    interval = setTimeout(function(){ showValue(variazioneAnticipo) }, 1000);
	});
});

function showValue(value) {
			alert("ANTICIPO VARIATO: " + value);
}

<input id="variazioneAnticipo" class="rightAlligned form-control" style="width: 60%" type="number" step="0.01" min="0" value="3" />

I explain it, when you input anything into the input, will trigger a setTimeout in 1 sec, if you press another key under this time, we clear the timeOut and we triiger again, so you will only have 1 alert 1 sec after the last input insert.

I hope it helps you, and soyy for my english :D