Question

我在加载jQuery UI滑块时遇到了一些问题。（仅在生产服务器上，因为它始终在我的本地开发服务器上完美加载）

问题是，jQuery UI Slider无法正确呈现（没有句柄，当我点击滑块时它会显示

Uncaught TypeError: Cannot call method 'addClass' of undefined

Modernizr.load从这里开始：

Modernizr.load([
    {
        test: window.matchMedia,
        nope: "{{ asset('bundles/projectmain/js/polyfills/respond.min.js') }}"
    },
    {
        load: [
            '//code.jquery.com/jquery-1.9.1.js',
            '//code.jquery.com/ui/1.10.1/jquery-ui.js'
        ],
        complete: function () {
            if ( !window.jQuery ) {
                Modernizr.load("{{ asset('bundles/projectmain/js/vendor/jquery-1.9.1.min.js') }}");
            }
        }
    },
    {
        load: [
            "iegt5!ielt9!{{ asset('bundles/projectmain/js/vendor/selectivizr-min.js') }}",
            "{{ asset('bundles/projectmain/js/plugins.js') }}",
            "{{ asset('bundles/projectmain/js/main.js') }}"
        ]
    }
]);

Main.js：

(function($) {
    this.init = function()
{   
    this.ageSlider();
    this.rankingSlider();

    this.equalHeights($('.filter-grid > div'));
    this.equalHeights($('.members-grid > .item .user'));
    this.equalHeights($('.members-grid > .item .info'));

    $('input, textarea').placeholder();

    $('.page.landing').backstretch('/bundles/projectmain/img/bg.jpg');
    $('.page.normal > header').backstretch('/bundles/projectmain/img/bg.jpg');

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) 
    {
        // do nothing please
        } else
        {
            $('input[type="checkbox"]').ezMark(); 
        }
}();    
})(jQuery);

main.js中的

年龄滑块功能

this.ageSlider = function() 
{
var minValue = parseInt($('#project_user_search_minAge').val());
var maxValue = parseInt($('#project_user_search_maxAge').val());

$('.age .slider').slider(
{
    range: true,
    min: '0', max: '100',
    values: [minValue, maxValue],
    create: function(e, ui)
    {
        $('.age .amount').html('Between ' + minValue + ' and ' + maxValue);
    },
    slide: function(e, ui) 
    {
    $('.age .amount').html('Between ' + ui.values[0] + ' and ' + ui.values[1]);
    $('#project_user_search_minAge').val(ui.values[0]);
    $('#project_user_search_maxAge').val(ui.values[1]);
    },
    change: function(e, ui)
    {
        $('#search').submit();
    }
});
};

//编辑：我发现了问题的原因。 Main.js中init函数中的代码不会在页面加载时执行，但是当Main.js完全加载时（因此早于页面加载）。当我使用来自HTML元素的值来初始化滑块时，如果页面按时加载，滑块将仅成功初始化。所以现在我将尝试在Main.js中的所有代码周围放一个$（document）.ready，看看它会给我什么。

jQuery UI Slider并不总是正确加载（使用Modernizr）

0 个答案: