Question

所以我在我的程序中使用JQuery滑块https://jqueryui.com/slider/并尝试释放滑块触发更新数据库的事件。我拥有的是

$('.ui-slider-handle').mouseup(function () {
    var $span = $(this).closest('#sliders').find('span.value'); // the span element that holds the value associated with the slider that was clicked
    $.ajax({
        method: 'POST',
        url: '/UpdateAnswer',
        data: {
            Answer: {
                QuestionId: $span.attr('data-qstnid'),
                AnswerId: $span.attr('data-answid'),
                AnswerVal: parseInt($span.text(), 10)
            },
            pid: $('input[name="pid"]').val()
        }
    });
});

除了1种类型的意外情况之外，这种方法很好：当按住滑块上的鼠标按钮时，移动滑块，然后在释放鼠标之前将鼠标移离滑块。在那种情况下，未定义滑块$span。

解决此问题的最佳方法是什么？ JavaScript / jQuery有一种自然的方式吗？或者我将不得不创建一个mousedown处理程序，将该元素传递给其他函数，然后附加一个mouseup处理程序......或类似的东西？

如果我需要更详细地描述我的情况，请告诉我。

Answer 1

您应该使用滑块本身的change或stop事件，而不是使用mouseup事件。

$( ".selector" ).on( "slidechange", function( event, ui ) {} );

或

$( ".selector" ).on( "slidestop", function( event, ui ) {} );

Answer 2

您应该使用jQueryUI事件stop，他们已经为您解决了这个问题。来自documentation：

$( ".selector" ).on( "slidestop", function( event, ui ) {} );

如何在单击后使jQuery UI滑块检测mouseup

2 个答案: