js动态改变input的值不触发input的change事件的解决办法

JS触发Change事件

最新推荐文章于 2024-11-06 13:04:46 发布

原创最新推荐文章于 2024-11-06 13:04:46 发布 · 1.4w 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

41 篇文章

订阅专栏

探讨了在使用JavaScript动态改变input值时，如何手动触发change事件，包括通过jQuery的change方法和监听select元素的值变化。

input通过键盘改变值会自动触发change事件，但通过js动态改变值后，不会自动触发，需要手动触发change事件。

1.通过js赋值后手动触发/手动监听

<input type="text" />
<button>赋值</button>
<script src="js/jquery.min.js"></script>
<script>
    $(function(){
        // 按钮点击事件
        $("button").on('click', function(){
            $("input").val("赋值成功");
        });
            
        // input值改变事件
        $("input").on('change', function(){
            $("button").after("<p>change事件触发</p>")
        });
    });
</script>

这里面的input值改变事件是没有触发的，想要让change事件也触发，需要手动触发change事件。

手动触发

// 按钮点击事件
$("button").on('click', function(){
    $("input").val("赋值成功");
    // 触发change事件
    $("input").change();
});

手动监听

<body>
    <input type="hidden" id="ttt" /><br/>
    <select id="eee" >
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</body>
<script type="text/javascript">
        var ttt =  document.getElementById("ttt");
        var eee =  document.getElementById("eee");
        eee.οnchange=function (){
            ttt.value=eee.value;
            ttt.addEventListener("input",changeValue(),false);
        }
        function changeValue(){
            alert(ttt.value);
        }