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

问题描述

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

I am working on a asp.net C# MVC web application and offers a jquery UI price range filter to filter the products based on selected price range. The resulted products are loaded via Ajax and everything seems to work fine upto now. However, after upgrading to the jQuery version 1.10.2 and jQuery UI 1.10.3, the same slider works on first load, but fails to load after Ajax requests. The following code is on the page where filter is being impelemented.

相同的代码在jQuery 1.7.1和jQuery UI 1.10.0上都可以正常工作.

The same code is working fine with jQuery 1.7.1 and jQuery UI 1.10.0.

通过Ajax加载内容后，似乎没有初始化滑块，但不确定原因！这有什么问题吗?

It appears that the slider is not initialized after content is loaded via Ajax, but not sure why! What could be wrong here?

$("#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");
    }
});

推荐答案

我认为您需要在渲染后初始化滑块.在初始渲染后创建的所有DOM元素都不会被已经运行的javascript初始化或绑定.

I think you need to initialize your slider AFTER it is rendered. None of the DOM elements you create after your initial render will be intialized or bound by javascript you have already run.

因此，第1次将您的初始化封装在一个函数中:

So, 1st Encapsulate your initialization in a function:

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

Then in your AJAX, call your init function on success

$.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后，Ajax调用后jQuery Range Slider不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！