Jquery ui 下拉菜单项中的jquery滑块导致事件过多

我在下拉菜单项中使用jQuery滑块。单击菜单项时，会打开一个带有滑块的下拉列表。用户需要拖动其中一个滑块手柄。从那时起，该页面上的任何鼠标移动都会导致滑块事件和回调。这会一直持续到我单击页面上的其他地方，有效地回滚菜单dowpdown

这种行为正常吗？用户释放滑块手柄后，如何停止滑块更改事件？每当用户更改滑块时，我都会从数据库重新加载一个页面。这会导致数据库负载过大

我正在使用带引导的jqueryui。您可以在中看到示例

以下是JS：

islide = 0;
$("#XYZ").text("DDDDDxD");
$("#XYZ").append("<b class=caret></b>");
$("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function (event, ui) {
        alert("hello #" + ++islide);
        $("#XYZ").html("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1) + " <b class='caret'></b>");


    }
});

islide=0；
$（“#XYZ”）.text（“ddd-xd”）；
$（“#XYZ”）。追加（“”）；
$（“#滑块范围”）。滑块({
范围：对，
分:0,，
最高：500，
数值：[75300]，
幻灯片：功能（事件、用户界面）{
警报（“你好”+++islide）；
$（“#XYZ”）.html（$”+$（“#滑块范围”）。滑块（“值”，0）+“-$”+$（“#滑块范围”）。滑块（“值”，1）+”）；
}
});

和html：

<div class="nav dropdown"> <a id="XYZ" data-toggle="dropdown" class="btn btn-primary" href="#"></a>
    <ul class="dropdown-menu">
        <li><a href="#">
                <p>Range: 0 to Inf</p>
                   <div id="slider-range"></div>
                </a>
        </li>
    </ul>
</div>

我也试过同样的方法，但没有启动。它看起来很丑，但行为却一模一样。有更好的选择吗

---

谢谢

导致这种行为的原因是这一行：

alert("hello #" + ++islide);

在幻灯片事件处理程序中调用alert（）时，鼠标永远不会释放。 因此，您必须删除对alert（）的调用：