从更新范围滑块获取价值？

我有一个jQuery Mobile的范围滑块。 我想结合自动完成和两个滑块值的结果，但我似乎只从滑块获取预定义的HTML值，而不是我当前选择滑动它的那个。

这是JS：

$(function() { function log(message) { $("
").text(message).prependTo("#log"); $("#log").attr("scrollTop", 0); } $.ajax({ url: "drycker.xml", dataType: "xml", success: function(xmlResponse) { var data = $("artikel", xmlResponse).map(function() { return { value: $("Namn", this).text(), id: $("Artikelid", this).text(), price: $("Prisinklmoms", this).text(), interval: $("#range-1a").val() }; }).get(); $("#birds").autocomplete({ source: data, minLength: 0, select: function(event, ui) { log(ui.item ? "Vald produkt: " + ui.item.value + ", artikel-ID: " + ui.item.id + ", pris: " + ui.item.price + ", prisintervall vald:" + ui.item.interval: "Ingen vald produkt, sökningen var " + this.value); } }); } }); }); 

和所需的HTML：

  
 Prisintervall:  Prisintervall:   

所以，问题在于

  interval：$（“＃range-1a”）。val（） 

只给出了值20，因为这是＃range-1a从一开始就设置的。 我永远不会得到新的价值。 有任何想法吗？

Answer 1

您需要添加SUBMIT或GO按钮以及相关的onClick处理程序。

这是发布代码的问题：它只在页面加载时执行一次。 这包括ajax请求。 它在页面加载时执行一次。

这就是服务器响应对应初始设置的原因。 永远不会告诉Web浏览器获取与任何新的或更新的请求相对应的信息。

您需要检测滑块更改的事件处理程序，然后重新提交ajax和响应处理程序。 所以似乎标准的jQuery $('selector').on('change', callbackFunction) 。on $('selector').on('change', callbackFunction) （docs： http ： //api.jquery.com/on/ ）在这里工作。

这是一个调试原型。 每当您移动任一滑块时，您将看到它现在在控制台日志上打印左滑块设置。 ajax已禁用但保存在函数中。 您可以设置更改处理函数来调用ajax函数，但是当拖动滑块时它会频繁触发，因此您需要对其进行去抖动。 让他们按下按钮（您需要添加）来发送请求更容易，也可能是更好的用户体验。 在这种情况下，您需要将按钮的onClick函数绑定到调用ajax并更新页面的函数。 另外，在您知道它是如何工作之后，您将要删除window.setTimeout和reporter（）函数。

这是http://jsfiddle.net/FnrcR/1/的代码

 function reporter(){ console.log("range-1a"); console.log($("#range-1a").val()); // window.setTimeout(reporter, 5000); } function doAjaxRequest(){ $.ajax({ url: "http://erikblomqvist.com/sandbox/dryck/drycker.xml", dataType: "xml", success: function(xmlResponse) { var data = $("artikel", xmlResponse).map(function() { return { value: $("Namn", this).text(), id: $("Artikelid", this).text(), price: $("Prisinklmoms", this).text(), interval: $("#range-1a").val() }; }).get(); $("#birds").autocomplete({ source: data, minLength: 0, select: function(event, ui) { log(ui.item ? "Vald produkt: " + ui.item.value + ", artikel-ID: " + ui.item.id + ", pris: " + ui.item.price + ", prisintervall vald:" + ui.item.interval: "Ingen vald produkt, sökningen var " + this.value); } }); } }); } $(function() { function log(message) { $("
").text(message).prependTo("#log"); $("#log").attr("scrollTop", 0); } // window.setTimeout(reporter, 1000); $("#myRange").on("change", reporter); }); 

Answer 2

你正在做什么看起来对我来说。 尝试启动Web检查器/开发人员工具栏并运行

$（ “＃范围-1A”）VAL（）;

validationjQuery是否正确返回您所追求的结果。 确认$（’＃yourID’）。val（）在AJAX请求之外工作。