检测到由滑块控制的字段中

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（），而不必每次都单击“提交”。

仅在我更改oninput='advancedSearch(this.form); return false;'字段中的数字时，才将技巧添加到<input>元素中。使用滑块时，尽管<input>确实被更改，但不会触发该功能。 document.getElementById('dateFrom').value也无效。除了手动更改onchange字段中的数字以外，如何使用滑块本身更改数字时如何调用该函数？

添加单独的功能：

<input>

产生相同的结果。

Answer 1

感谢Prikesh Savla向我指出了

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

advancedSearch(formData)
});

事件。不幸的是，当通过以下方式实现时：

changed.zf.slider

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

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

这是我想要的，尽管我知道这不是最优雅的解决方案。