JQuery 检测由 JS 进行更改的更改输入答案

【问题标题】：JQuery Detect change input where the change was made by JSJQuery 检测由 JS 进行更改的更改输入
【发布时间】：2017-10-26 10:03:03
【问题描述】：

我想检测由 JS 进行更改的输入值的变化。

HTML：

<input type="text" name="test_input"><br><br>
<button name="change_input">Change usign JS </button>

JS：

$(function() {
    $('body').on('change','input[name="test_input"]',function() {
        alert('Changed');
    });
    $('button[name="change_input"]').on('click',function() {
        $('input[name="test_input"]').val('New value');
    });
})

https://jsfiddle.net/7c54r7x9/

谢谢

【问题讨论】：

标签： jquery html detect

【解决方案1】：

仅当用户输入进行修改时才会引发更改事件。当它以编程方式设置时，您需要自己引发事件。在 jQuery 中，您可以使用 trigger() 来做到这一点，如下所示：

$(function() {
  $('body').on('change', 'input[name="test_input"]', function() {
    console.log('Changed');
  });

  $('button[name="change_input"]').on('click', function() {
    $('input[name="test_input"]').val('New value').trigger('change');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test_input"><br><br>
<button name="change_input">Change usign JS </button>

【讨论】：

天啊，好答案！你知道没有 .trigger 检测是如何改变的吗？ :)（未来）
不可能。正如我上面提到的，通过 JS 更改属性不会引发任何事件。如果您更改了 DOM 中的属性，您可能会使用 MutationObserver，但在这种情况下，使用 trigger() 是迄今为止更好的解决方案
嗯好的 :) 谢谢你的回答 :)
没问题，很高兴为您提供帮助

【解决方案2】：

如下更改您的代码。希望对你有帮助

$(function() {
    $('input[name="test_input"]').change(function() {
        alert('Changed');
    });
    $('button[name="change_input"]').on('click',function() {
        $('input[name="test_input"]').val('New value');
    $('input[name="test_input"]').trigger("change");
    });
})

【讨论】：