动态插入的值无法触发输入时的Jquery事件

Question

我正在尝试使用jQuery在JavaScript代码生成值时发出警报，该值在输入框上生成，问题是jQuery无法检测到更改，我测试的命令是“change、input”，但当我手动输入值时，jQuery触发。 示例代码：

该值是通过JavaScript动态生成并推送/插入到输入框中的，不是手动生成的。 javascript：

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

html:

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

jQuery：

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

在执行之后，id="displayDID"的值发生了改变，但是jQuery无法检测到。

示例代码：http://jsfiddle.net/SU7bU/1/

- user3261755

---

它运行良好: http://jsfiddle.net/paRPL/1/ - caramba

如果您想要在每次更改时发出警报，则将“input”更改为“keyup”，或者如果您想要在焦点离开后发出更改警报，则将其更改为“change”。 - Pavlo

它在手动输入时运行良好，但当值从JavaScript推送时则无法正常工作。 - user3261755

尝试这个：$('#displayDID').val('some value').change(); - 这应该触发你的 onchange 事件。 - Pavlo

我认为这就是你要找的：http://jsfiddle.net/LGAWY/141/ 更多信息请查看此链接，参见David的回答：https://dev59.com/rHM_5IYBdhLWcg3wSBAU - caramba

Answer 1

为其添加触发器。

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


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

});

http://jsfiddle.net/ytexj/

- ah-shiang han

---

请阅读说明，这不是手动触发的，而是由系统触发的。 - user3261755

Answer 2

由于您在输入准备就绪之前添加了脚本，因此事件没有在该元素上设置。请在文档准备就绪时编写代码：

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

或者使用事件委托：

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

- Milind Anantwar

---

仍未触发jQuery。 - user3261755

你能创建这个 Fiddle 吗？ - Milind Anantwar

Answer 3

好的，我会给你提供一个答案，让我们看看它是否能解决你的问题。 如果你使用keyup事件，并插入3350值，你将会显示4个警报，而我认为你只想显示1个警报。

$(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" />

我来解释一下，当你在输入框中输入任何内容时，会触发一个1秒的setTimeout，如果在这段时间内按下另一个按键，我们将清除setTimeout并再次触发，因此您只会在最后一次输入后的1秒钟收到1个警报。

希望这可以帮助到您，同时很抱歉我的英语:D

- Manuel Garcia