Question

我们可以使用下面的代码确定输入是否发生变化

$(document).on('keyup', '#input1', function(event) 
{
    console.log('changes made');
});

但是我有很多事件会改变＃input1

的值

例如

$(document).on('click', '#button1', function(event) 
{
    $("#input1").val("one");
});

有没有一种方法可以检测在＃input1 上所做的更改，而无需调用类似的功能

function inputIsChange()
{
   console.log('changes made');
}

Answer 1

对于输入元素，您可以使用input事件。通过用户界面更改元素的文本内容时，会发生input事件。

$(document).on('input', '#input1', function(event) 
{
    console.log('changes made');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1" />

Answer 2

对于输入元素，您还可以使用.change：

$('#input').change(function () {
     console.log('change detected');
});

此处的文档：https://api.jquery.com/change/

Answer 3

您可以这样：

$(document).on('input', '#input1', function() {
  console.log('Changes made');
});

$.fn.changeVal = function (value) {
  return this.val(value).trigger('input');
}
$('#input1').changeVal(12324324);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1" />

Answer 4

您可以创建一个新方法来处理更改，然后触发customEvent。

请参阅下面的示例。

已更新：

添加事件数据。

$(function () {
  function setNewValue(target, newData) {  
    $(target).html(newData); // <== html() || text() || val()
    $(target).trigger('customEvent');
  }
  
  $('button').on('click', function(e) {
    var randomNumber = Math.floor(Math.random() * 2000) + 1;
    setNewValue($('#myDiv'), randomNumber);
  });
  
  $('#myDiv').on('customEvent', function(e) {
    console.log(e);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myDiv">test</div>

<button>click me</button>

通过多个事件检测元素的变化

4 个答案: