【发布时间】：2020-11-19 09:42:04
【问题描述】：
我有这个使用 jQuery UI API 的 range 滑块，它按预期工作，但现在我试图将滑块委托给 DOM，无论我尝试什么它都不起作用.这是我的初始代码（没有选择器委托）：
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]);
}
});
在谷歌搜索后，我找到了this potential solution。但是我要么做错了，要么因为我似乎无法正确处理而无法正常工作：
JS 尝试 1 失败
$('#WTrange').slider();
$(document).on('slidecreate', '#WTrange', function(event, ui) {
}).on('slider', '#WTrange', function(event, ui) {
range: true,
values: [2.50, 30.00],
min: 2.50,
max: 30.00,
step: 0.01
}).on('slidechange', '#WTrange', function(event, ui) {
alert('Things have changed!');
}).on('slide', '#WTrange', 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]);
});
当running this (in JSFiddle) 我得到这个错误：
"<a class='gotoLine' href='#35:9'>35:9</a> Uncaught SyntaxError: Unexpected token ':'"
有人知道将这个 jQuery UI 滑块小部件委托给 DOM 的正确方法吗？
编辑 1
我尝试将其重新格式化为委托，但仍然无效：
JS 尝试 2 失败
$('#WTrange').slider();
$(document).on('slide', '#WTrange', 'option', 'range', true);
$(document).on('slide', '#WTrange', 'option', 'values' [2.50, 30.00]);
$(document).on('slide', '#WTrange', 'option', 'min', 2.50);
$(document).on('slide', '#WTrange', 'option', 'max', 30.00);
$(document).on('slide', '#WTrange', 'option', 'step', 0.01);
$(document).on('slidechange', '#WTrange', function(event, ui) {
alert('Things have changed!');
});
$(document).on('slide', '#WTrange', 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]);
});
编辑 2
有人告诉我我的问题不够清楚。这是more minimal and reproducible example：
$(document).ready() 上的 HTML
<div id="pageContent">
<button>Show Slider</button>
</div>
注意： jQuery UI 滑块没有 HTML
$(document).ready() 上的 JS
$('button').on('click', function() {
$('#pageContent').load('sliderPage.php');
});
$('#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]);
}
});
注意：当用户.click()s 时<button>sliderPage.php 将.load()
sliderPage.php 加载后的HTML <button>点击
<div id="pageContent">
<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>
</div>
注意：现在同一页面上有 jQuery UI 滑块的 HTML
基本问题：
因为<div class="SliderContainer"> 的HTML 内容不是$(document).ready() 上DOM 的一部分，所以它们的事件必须是.delegate()d 在DOM 树上。如何委托这个 jQuery UI 滑块以便我的 JS 识别它？
【问题讨论】：
-
slider是一个插件，而不是一个事件。您很可能无法委派它。 -
您是否知道在
.load()父选择器之后除了委派它之外还有其他方法可以显示它吗？ -
您可以在需要/可用的时间点初始化它。
-
对不起，我对此有点陌生； 初始化是什么意思？
-
$('#WTrange').slider({slider() 的调用正在“初始化”插件逻辑。这是设置步骤。
标签： javascript jquery jquery-ui jquery-plugins jquery-ui-slider