jquery.ui.spinner改变了

我正在尝试使用最新版本的jquery.ui.spinner.js。 http://wiki.jqueryui.com/w/page/12138077/Spinner

微调器正在显示和更新文本框，但我无法弄清楚如何捕获“更改”事件。 它会在您手动更改文本框中的值时触发，但在使用微调器箭头时则不会触发。

jQuery的：

$('input[name*="opening"]').spinner({ min: 0, max: 100}); $('#doorsize6w7h-f').spinner().change(function(){ alert($(this).spinner('value')); }); 

HTML：

Answer 1

在调整文本框上的change()的微调控件上附加一个事件。

 $('.ui-spinner-button').click(function() { $(this).siblings('input').change(); }); 

jsFiddle 。

设置微调器后。

Answer 2

我想这就是你需要的：

 $('.mySpinner').spinner({ stop:function(e,ui){ alert('Triggered after a spin.'); } }); 

与绑定到按钮的click事件不同，这还将检测键盘上使用向上/向下键。

有关详细信息和更多活动，请参阅此页面： http ： //api.jqueryui.com/spinner/#entry-examples

Answer 3

好吧，实际上我会通过标准的“更改”事件来路由更改并捕获所有内容，例如：

 $('input[name*="opening"]').spinner({ min: 0, max: 100, spin: function(event, ui) { $(this).change(); } }); 

Answer 4

没有“更改”事件，而是使用“spinstop”事件：

 $('#doorsize6w7h-f').on("spinstop", function(){ alert($(this).spinner('value')); }); 

文档还提出了spinchange事件，但对我来说这有点迟钝 。

资源： http ： //api.jqueryui.com/spinner/？rfrom = http％3A％2F％2Fdocs.jquery.com％2Fmw％2Findex.php％3Ftitle％3DUI％2FSpinner％2Fspinner％26redirect％3Do #event-change

Answer 5

这给了我最流畅的结果：

 function betterSpinner(input) { input.spinner( { spin: function(event, ui) { // the spin event is raised before the value actually gets changed, // so let's update it here before raising the input's change() event. input.val(ui.value); input.change(); } }); } $(document).ready(function () { betterSpinner($("#myInput")); }); 

Answer 6

我知道这个问题已经得到了回答。 但我希望这会有助于其他人。

除了手动编辑值并使用微调器的箭头按钮，还可以使用键盘上的箭头按钮编辑微调器的值。 在这种情况下，我发现keyup事件比change事件更健壮：

 $(document).ready(function(){ var range_spinner = $('.spinner').spinner(); // hack to trigger input keyup whenever spinner button clicked: $('.ui-spinner-button').click(function() { $(this).siblings('input').keyup(); }); // keyup will catch any stroke on keyboard $('#range').keyup(function(){ console.log(range_spinner.spinner('value')); }); });