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/

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, Feb 14 '14 at 10:37
it works fine on manual input, but doesnt when the value is pushed from javascript — user3261755, Feb 14 '14 at 10:38
Try this one: $('#displayDID').val('some value').change(); - this should fire you onchange event. — Pavlo, Feb 14 '14 at 10:42
I think this is what you are looking for: http://jsfiddle.net/LGAWY/141/ more information on this link, see Davids answer: http://stackoverflow.com/questions/1443292/how-to-implement-onchange-of-input-type-text-with-jquery — caramba, Feb 14 '14 at 12:57

score 3 · Answer 1 · edited Jul 30 '18 at 19:54

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

edited Jul 30 '18 at 19:54

aioobe

413,195
112
811
826

answered Feb 14 '14 at 12:08

ah-shiang han

330
1
9

please read the description, it is no manually triggered, it is triggered by the system. – user3261755 Feb 14 '14 at 15:34

score 2 · Answer 2 · answered Feb 14 '14 at 10:37

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

answered Feb 14 '14 at 10:37

Milind Anantwar

81,290
25
94
125

still not triggering the jquery – user3261755 Feb 14 '14 at 11:17
can you create the fiddle?? – Milind Anantwar Feb 14 '14 at 11:38

score 0 · Answer 3 · answered Dec 17 '15 at 10:40

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

Jquery on Input not working on dynamically inserted value

3 Answers3