UI 页面加载到容器中时滑块不可见

Question

我的网站页面上有一个范围滑块，但由于某种原因不可见。我不明白为什么。

• index.php 的主体由一个导航栏和 4 个 link 和一个 使用 id="pageContent".

  分隔容器

• 在我的 JavaScript 中，当页面加载时它会加载另一个页面 (HomePage.php) 变成 #pageContent ($(#pageContent).load('HomePage.php');).

• 至于导航栏；它将点击的 link 的名称作为 变量，将 .php 添加到它的末尾并将其加载到 #pageContent:

$('#navContent a').on('click', function() {

    var page = $(this).attr('href'); // Get link name 

    $(#pageContent).load(page + '.php'); // Load clicked page

    return false;

});

• 站点的一个页面 (var page) 上有一个范围滑块。我的问题是当该页面加载 [进入 #pageContent] 时滑块不显示。

• 我也没有收到任何浏览器控制台错误。

这是滑块的代码：

HTML

<div class="SliderContainer">
                    
    <input type="hidden" id="minWT" value="2.5" />
    <input type="hidden" id="maxWT" value="30" />

    <p class="wtNumber" id="showWT">2.5Ct - 30Ct</p>

    <div class="rangeContainer">
        <div id="WTrange"></div>
    </div>

</div>

JS

 $('#WTrange').slider({
        
    range: true,
    values: [2.50, 30.00],
    min: 2.50,
    max: 30.00,
    step: 0.01,
    change:

        function(event, ui) {
            
            alert('Things have changed!');
            
        },
    slide: 

        function(event, ui) {
            
            // Prevent range thumbs from overlapping
            if ((ui.values - ui.values[1]) < 3) {

                return false;

            }
        
            $('#showWT').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct'); // Show value above range slider
            $('#minWT').val(ui.values[0]);
            $('#maxWT').val(ui.values[1]);
            
        }
        
});

当我 运行 页面单独显示滑块时，但当我 运行 它与我网站的其余部分 [进入 #pageContent] 时它不会。有谁知道我做错了什么？

Answer 1

我需要在加载附加 HTML 代码后 运行 滑块代码。

jQuery.load() 函数有额外的可选参数 - 一个是“完整的”。

我相应地调整了 $(...).load() 函数：

$('#navContent a').on('click', function() {
    var page = $(this).attr('href'); // Get link name
    // load the clicked page ...
    $( "#pageContent" ).load( "/" + page + ".php", function( response, status, xhr ) {
        if ( status == "success" ) {
            // do we have a slider?
            if ( $('#WTrange').length ) {
                // yes, run the slider's code ...
                $('#WTrange').slider({
                    // rest of the slider code goes here ...
                });
            }
        }
    });
    return false ;
});