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

最新推荐文章于 2023-12-29 23:26:56 发布

小小鸟008

最新推荐文章于 2023-12-29 23:26:56 发布

阅读量1.3w

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36412715/article/details/103610825

版权

前端专栏收录该内容

35 篇文章 3 订阅

订阅专栏

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);
        }

小小鸟008

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js动态改变input的值不触发input的change事件的解决办法

input通过键盘改变值会自动触发change事件，但通过js动态改变值后，不会自动触发，需要手动触发change事件。1.通过js赋值后手动触发/手动监听<input type="text" /><button>赋值</button><script src="js/jquery.min.js"></script><scr...
复制链接

扫一扫