val() doesn't trigger change() in jQuery
当我用按钮更改其值时,我试图在文本框上触发
如果在文本框中键入内容并单击其他位置,则会触发
您可以在设置值后手动调用
1 | $("#mytext").change(); // someObject.onchange(); in standard JS |
或者,您可以使用以下命令触发事件:
1 | $("#mytext").trigger("change"); |
从redsquare的出色建议来看,这很好用:
1 2 3 4 5 | $.fn.changeVal = function (v) { return this.val(v).trigger("change"); } $("#my-input").changeVal("Tyrannosaurus Rex"); |
您可以非常轻松地覆盖
只需在文档中的某处添加此代码(在加载jQuery之后)
1 2 3 4 5 6 7 8 9 | (function($){ var originalVal = $.fn.val; $.fn.val = function(){ var result =originalVal.apply(this,arguments); if(arguments.length>0) $(this).change(); // OR with custom event $(this).trigger('value-changed'); return result; }; })(jQuery); |
一个工作的例子:这里
(请注意,即使值实际没有更改,当调用
如果您只想在值实际更改时触发更改,请使用以下值:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //This will trigger"change" event when"val(new_val)" called //with value different than the current one (function($){ var originalVal = $.fn.val; $.fn.val = function(){ var prev; if(arguments.length>0){ prev = originalVal.apply(this,[]); } var result =originalVal.apply(this,arguments); if(arguments.length>0 && prev!=originalVal.apply(this,[])) $(this).change(); // OR with custom event $(this).trigger('value-changed') return result; }; })(jQuery); |
实例:http://jsfiddle.net/5fSmx/1/
你需要像这样链接方法:
1 | $('#input').val('test').change(); |
不需要在设置值后手动触发它:
1 | $('#mytext').change(); |
要么:
1 | $('#mytext').trigger('change'); |
看起来这些事件并没有冒泡。试试这个:
1 2 3 4 5 6 7 8 | $("#mybutton").click(function(){ var oldval=$("#mytext").val(); $("#mytext").val('Changed by button'); var newval=$("#mytext").val(); if (newval != oldval) { $("#mytext").trigger('change'); } }); |
我希望这有帮助。
我尝试了一个普通的旧
截至2019年
1 2 3 4 5 6 | txt.addEventListener('input', function() { console.log('not called?'); }) $('#txt').val('test').trigger('input'); $('#txt').trigger('input'); $('#txt').change(); |
1 2 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <input type="text" id="txt"> |
你必须使用
1 2 3 4 5 | txt.addEventListener('input', function() { console.log('it works!'); }) $('#txt').val('yes') txt.dispatchEvent(new Event('input')); |
1 2 3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <input type="text" id="txt"> |
来自https://api.jquery.com/change/:
我知道这是一个旧线程,但对于其他人来说,上面的解决方案可能不如以下那么好,而不是检查
1 2 3 4 | $("#myInput").on("input", function() { // Print entered value in a div box $("#result").text($(this).val()); }); |