javascript - 检测由 slider 控制的 <input> 字段的变化

Question

我有一个带有双 handle slider 的表单:

<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>

一切都运转良好。现在，我想在更改 slider 的句柄时调用函数 advanceSearch()，而不必每次都点击“提交”。

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

添加单独的函数:

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

advancedSearch(formData)
});

产生相同的结果。

Answer 1

感谢 Pikesh 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'));
        });

它满足了我的要求，尽管我意识到这不是最优雅的解决方案。