JQuery 移动滑块 vmouseup 事件答案

【问题标题】：JQuery Mobile Slider vmouseup EventJQuery 移动滑块 vmouseup 事件
【发布时间】：2012-05-03 20:05:39
【问题描述】：

由于我现在花了大约一周的时间来解决一个问题，所以我决定在这个社区中询问是否有人可以帮助我，或者至少在跌倒的故事成为现实之前给我一个线索:-)

我正在用 Python 编写一个动态页面，该页面生成 HTML 输出，其中表单将其值提交给生成的 Python 脚本本身——效果很好——在客户端使用 JQuery Mobile。我确实使用多页布局，其中 5 页包含一个带有滑块的表单。

我希望所有滑块都触发一个 cgi 脚本（即 Python 脚本本身）。我首先在每个表单中使用以下代码：

<form action="**scriptname**" method="get" name="raum1" id="f_raum1">

<input type="range" name="slider_r1l" id="slider-1" value="**bfout1**" min="-70" max="12" data-theme="b" data-highlight="true" data-track-theme="a" onchange="document.getElementById('f_raum1').submit()"/>

（xxx的值在输出到浏览器之前会被python替换）

问题是，onchange 在我完成滑块值更改之前触发（意味着我仍在滑块上更改值），因为即使是很小的更改也会触发 cgi 请求。我想用 vmouseup 来做到这一点，这样当我从设备上松开手指或鼠标时，触发器就会变为真。

我在我的 html 标头中尝试了这个，但我没有让它工作（肯定是因为我缺乏 Javascript 知识）并删除了输入标签中的 onchange：

<script type="text/javascript">
var in = getElementsByTagName("INPUT");
$(in).bind('vmouseup', function () {
self.document.submit();
 });
</script>

我的问题在哪里？这应该将所有输入标签绑定到 vmouseup 函数？

【问题讨论】：

标签： jquery jquery-mobile slider jquery-events

【解决方案1】：

鼠标与图形组件交互，而不是输入框。您可以绑定到 -ui-slider：

$('#slider-1').siblings('.ui-slider').bind('vmouseup', function () {
  /* Do submit */
});

您在此处获得了有关如何绑定滑块事件的更详细说明： jQueryMobile: how to work with slider events?

【讨论】：