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

Posted 2023-05-08

【中文标题】页面加载到容器中时 UI 滑块不可见

【英文标题】：UI slider isn't visible when page loads into container

【发布时间】：2020-11-24 23:44:56

【问题描述】：

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

index.php 的主体由一个带有 4 个链接的导航栏和一个 使用id="pageContent" 分隔容器。

在我的 javascript 中，当页面加载时，它会加载另一个页面 (HomePage.php) 转入#pageContent ($(#pageContent).load('HomePage.php');)。

至于导航栏；它将点击链接的名称作为 变量，将 .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]，它不会。有谁知道我做错了什么？

【参考方案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 ;
);