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绑定。

因此，1st在函数中封装初始化：

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

在将jQuery更新为1.10.2之后，jQuery Range Slider在Ajax调用之后无法正常工作

1 个答案: