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

Question

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

• index.php的主体由一个带有4个链接的导航栏和一个使用CCD_ 1分离容器。

• 在我的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](，滑块不会显示。有人知道我做错了什么吗？

Answer 1

加载额外的HTML代码后，我需要运行滑块代码。

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