检测由滑块控制的 <input> 字段中的变化

Question

我有一个带有双手柄滑块的表单：

<form id="advancedSearch" action="modules/advanced_search.xq" method="post" onsubmit="advancedSearch(this);">

<div class="slider" id="slider" data-aria-valuemin="1725" data-aria-valuemax="1786" data-slider="data-slider" data-start="1725" data-end="1786" data-initial-start="1725" data-initial-end="1786">

<span id="handle1" class="slider-handle" data-slider-handle="data-slider-handle" role="slider" tabindex="1" aria-controls="dateFrom"/>

<span id="handle2" class="slider-handle" data-slider-handle="data-slider-handle" role="slider" tabindex="1" aria-controls="dateTo"/>

[...]
<input type="number" max="1786" min="1725" id="dateFrom" name="dateFrom"/>
</div>
<div class="cell small-2">
<input type="number" max="1786" min="1725" id="dateTo" name="dateTo"/>
[...]
</form>

一切正常。现在，我想在更改滑块句柄时调用函数 advancedSearch()，而不必每次都点击 'submit'。

向 <input> 元素添加 oninput='advancedSearch(this.form); return false;' 仅当我更改 <input> 字段内的数字时才有效。使用滑块时，虽然 document.getElementById('dateFrom').value 确实发生了变化，但不会触发该功能。 onchange 也不行。除了手动更改 <input> 字段内的数字之外，如何使用滑块本身更改数字时调用该函数？

添加一个单独的函数：

document.getElementById('dateFrom').addEventListener('change', (event) => {
var formData = document.getElementById('advancedSearch')

advancedSearch(formData)
});

产生相同的结果。

Answer 1

感谢 Prikesh Savla 为我指明 changed.zf.slider 活动。不幸的是，在使用以下方法实现时：

$("#slider").on('change changed.zf.slider', function(){ { var formData = document.getElementById('advancedSearch') advancedSearch(formData); }});

页面在加载时调用该函数（刷新或登陆）。经过一些故障排除后，我无法找到原因。最后我添加了这段代码：

document.querySelector('.slider').addEventListener("click", function () {
            advancedSearch(document.getElementById('advancedSearch'));
        });
        document.getElementById('dateFrom').addEventListener("input", function () {
            advancedSearch(document.getElementById('advancedSearch'));
        });
        document.getElementById('dateTo').addEventListener("input", function () {
            advancedSearch(document.getElementById('advancedSearch'));
        });

这就是我想要的，虽然我知道这不是最优雅的解决方案。

检测由滑块控制的 <input> 字段中的变化

Detect change in an <input> field controlled by a slider

javascript

slider

zurb-foundation