26

假设您的页面上有一个简单的文本框和按钮。单击按钮将更新文本框值：

HTML：

<input type="text" id="myText" val="" />
<input type="button" id="myBtn" value="Change TextBox Value" />

jQuery：

$("#myBtn").on('click', function() {
   $("#myText").val('adsf');
})

我想为文本框的更改事件添加一个事件侦听器，如下所示：

$('#myText').on('change', function(){
    alert('Changed!')
});

当您单击按钮时不会触发该警报，但是当您手动更改文本框值并将焦点移出它时会触发它。

我知道您可以添加$("#myText").trigger('change')到按钮的 onclick 事件中，但我希望仅通过向文本框添加事件侦听器来完成此操作。

jsfiddle

谢谢

4

5 回答 5

18

不支持此类事件。您唯一可以尝试的是设置间隔或超时以检查值是否已更改（使用数据存储临时值）：

var $myText = $("#myText");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
        val = $myText.val();

    if (data !== val) {
        $myText.data("value", val);
        alert("changed");
    }
}, 100);

演示：http: //jsfiddle.net/xZcAr/1/

于 2013-04-16T22:22:46.693 回答
3

为什么不像这样单击按钮时强制手动事件 -

$('#myText').on('change',function(e){
    alert('Changed!');
});

$("#myBtn").on('click', function() {
    $("#myText").val('adsf');
    $("#myText").change();
})
于 2013-04-16T22:53:56.590 回答
0

您需要简单地使用keyup功能：

$( "#myText").keyup(function(){
   alert($(this).val());
});
于 2015-03-10T11:47:32.680 回答
0

您需要连接两个处理程序。要重用处理程序，您可以将其提取到命名函数：

function showChanged(){
    alert('Changed!')
}

$("#myBtn").on('click', showChanged);
$("#myText").on('change', showChanged);
于 2013-04-16T22:16:48.933 回答
0

你可以做这样的事情。而不是监听输入字段，而是监听同时更新的 div 上的更改。 

function trigger(){
setTimeout(function(){ 
document.getElementsByName("Thing")[0].value = 'hello'
document.getElementById('myDiv').innerHTML = document.getElementsByName("Thing")[0].value 

}, 3000);
}

trigger()
document.getElementById("myDiv").addEventListener('DOMSubtreeModified', (e)=>{
  console.log(e.target.innerHTML)
 
});
<input type="text" name="Thing" value="" />
<div style="display:none;" id="myDiv"></div>

于 2019-09-12T08:12:06.657 回答