将 jQuery 更新到 1.10.2 后，jQuery Range Slider 在 Ajax 调用后不起作用

Question

我正在开发一个 asp.net C# MVC Web 应用程序，并提供一个 jquery UI 价格范围过滤器来根据选定的价格范围过滤产品。生成的产品通过 Ajax 加载，到目前为止一切正常。但是，升级到 jQuery 版本 1.10.2 和 jQuery UI 1.10.3 后，相同的滑块在第一次加载时工作，但在 Ajax 请求后无法加载。以下代码在执行过滤器的页面上。

相同的代码在 jQuery 1.7.1 和 jQuery UI 1.10.0 上运行良好。

似乎在通过 Ajax 加载内容后滑块没有初始化，但不知道为什么！这里有什么问题？

$("#slider-range").slider({
    range: true,
    min: minValue,
    max: maxValue,
    values: [selectedMinValue, selectedMaxValue],
    values: [selectedMinValue, selectedMaxValue],
    slide: function (event, ui) {
        //Note: Currency Custom formatting is not supported.
        $(".currentMinPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + ui.values[0]);
        $(".currentMaxPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + ui.values[1]);


    },
    change: function (event, ui) {

        var url = removeParameter('@(currentURL)', "price");
        var newUrl = url.replace(/&amp/g, '');
        if (isAjaxRequest) {
            callAjax(UpdateQueryString("price", ui.values[0] + "-" + ui.values[1], newUrl));
        }
    }
});
isAjaxRequest = true;
$(".currentMinPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + $("#slider-range").slider("values", 0));
$(".currentMaxPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + $("#slider-range").slider("values", 1));
}

Ajax 函数

$.ajax(
{
    url: url,
    type: 'POST',
    success: function (result) 
    {   
        // Result is in html
        $('#catalog').replaceWith(result);
        $('#ajax-loading').hide();
        DisplayFilter();

        //Lazy Loading
        $("img.lazy").show().lazyload(
        {
            effect: "fadeIn"
        });
        $(window).trigger("scroll");
    }
});

Answer 1

我认为您需要在渲染滑块后对其进行初始化。您在初始渲染后创建的任何 DOM 元素都不会被您已运行的 javascript 初始化或绑定。

所以，首先将你的初始化封装在一个函数中：

function initSlider(passedMin, passedMax)
{
$("#slider-range").slider({
    range: true,
    min: passedMin,
    max: passedMax,
    values: [selectedMinValue, selectedMaxValue],
    values: [selectedMinValue, selectedMaxValue],
    slide: function (event, ui) {
        //Note: Currency Custom formatting is not supported.
        $(".currentMinPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + ui.values[0]);
        $(".currentMaxPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + ui.values[1]);


    },
    change: function (event, ui) {

        var url = removeParameter('@(currentURL)', "price");
        var newUrl = url.replace(/&amp/g, '');
        if (isAjaxRequest) {
            callAjax(UpdateQueryString("price", ui.values[0] + "-" + ui.values[1], newUrl));
        }
    }
});
isAjaxRequest = true;
$(".currentMinPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + $("#slider-range").slider("values", 0));
$(".currentMaxPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + $("#slider-range").slider("values", 1));
}

} 

然后在您的 AJAX 中，成功调用您的 init 函数

$.ajax(
{
    url: url,
    type: 'POST',
    success: function (result) 
    {   
        // Result is in html
        $('#catalog').replaceWith(result);
        $('#ajax-loading').hide();
        DisplayFilter();

        //Lazy Loading
        $("img.lazy").show().lazyload(
        {
            effect: "fadeIn"
        });
        $(window).trigger("scroll");

        initSlider(newMin, newMax)
    }
});