为什么向文本框添加文本时无法触发预设的alert提醒

问题根因 #

你当前的代码没有达到预期效果，核心原因是：通过jQuery的val()方法动态修改输入框内容时，默认不会触发input、propertychange、change这类你绑定的监听事件，因此回调中的alert不会执行。

解决方案 #

最简便的实现方式是在给输入框赋值后，手动触发对应的监听事件，你只需要修改按钮点击的回调逻辑即可，调整后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <title>Page Title</title>
</head>
<body>
    <form>
        <input id="check" type="text" name="check" >
    </form>
    <button id="test">ClickMe</button>

    <script>  
    $(document).ready(function() {
        $('#test').click(function () {
            // 赋值后主动触发input事件
            $('#check').val('Example').trigger('input');
        })

        $('#check').on('input propertychange paste change', function () {
            alert("text added");
        })
    })
    </script>
</body>
</html>

如果你不想修改按钮侧的赋值逻辑，也可以通过MutationObserver接口监听输入框的value属性变化，实现赋值自动触发回调，不过这种方式实现复杂度更高，常规场景下优先使用手动触发事件的方案即可。

内容的提问来源于stack exchange，提问作者Danny W