Javascript 检测一个<；输入>；由滑块控制的场

我有一个带有双手柄滑块的窗体：

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

---

产生相同的结果。

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

---

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

通常滑块库会提供一个事件来更改滑块。您使用的滑块库是什么。您可能可以使用document.getElementById（'dateFrom'）.addEventListener（“单击”，函数（）{advancedSearch（document.getElementById（'advancedSearch'））；}）@我正在使用基金会。将代码从getElementById（'dateFrom'）更改为getElementById（'handle1'）实际上会检测到对句柄的单击，即日期更改时，因此它似乎是这样工作的。但有两个问题：如何检测手柄1和手动日期输入？我是否也要为这些输入复制代码？更重要的是，这款手机/平板电脑友好吗？就是这个吗？如果是这样，那么它将提供js事件来触发值更改。您可以在链接的底部找到事件“changed.zf.slider”-好的，我通过使用document.querySelector（“#slider”）解决了选择两个句柄的问题。我建议使用querySelector中的类在一个事件函数中获取所有句柄。如果视图中有更多滑块，您可能忘记将其放在jQuery.ready部分中，该部分将等待文档准备就绪。此外，“输入更改”也起作用。

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