js无法监听input值的变化，如何解决？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <input type="text" id="input" value="0">
    <span class="btn">+1</span>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        $(function(){
            /*改变input值*/
            $(".btn").on("click",function(){
                let new_value =  parseInt($("#input").val()) + 1;
                $("#input").val(new_value);
            });
            /*监听input值的变化*/
            $("#input").bind("input propertychange",function(){
                console.log($(this).val());
            });
        });
    </script>
    
</body>
</html>

如上代码，通过程序改变input值时，无法监听到input值的变化，请问该如何改进？

注意是通过js改变input值，而不是键盘输入。请勿在js改变input值的函数里触发数据监听函数，上述代码仅作示意

谢谢。

javascript jquery input

阅读 9.6k

7 个回答

陌路凡歌

✓ 已被采纳

用defineProperty吧

<input type="text"  id="aaa" value="1" />
<button id="btn">add1</button>

             var aaa =document.getElementById("aaa");
            var btn =document.getElementById("btn");
            var obj = {};
            btn.onclick=function(){
                if(aaa.value){
                    obj.val = parseInt(aaa.value)+1;
                }else{
                    obj.val = 1;
                }
            }
            valcahnge(aaa,function(){
                console.log(aaa.value);
            });
            function valcahnge(dom,fn){                    
                Object.defineProperty(obj,'val',{
                    get:function(){                    
                        return this._val;
                    },
                    set:function(val){
                        dom.value = val;
                        fn();
                        this._value=val;
                    }
                });            
            }