如何将 jQuery UI 滑块委托给 DOM？
How do I delegate a jQuery UI slider to the DOM?
我有这个 range 滑块使用 jQuery UI API，它按预期工作但现在我正在尝试将滑块委托给 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:
HTML 在 $(document).ready()
<div id="pageContent">
<button>Show Slider</button>
</div>
注意： jQuery UI 滑块没有 HTML
JS 在 $(document).ready()
$('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() 的 <button> sliderPage.php 将 .load()
HTML 在 sliderPage.php 加载 之后 <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>
注意：现在同一页面上的jQueryUI滑块有HTML
基本问题：
因为 <div class="SliderContainer"> 的 HTML 内容不是 $(document).ready() 上 DOM 的一部分，所以它们的事件必须 .delegate()d 在 DOM 树中.我如何委托此 jQuery UI 滑块以便我的 JS 识别它？
请评论：https://api.jqueryui.com/slider/
这是一个如何使用它的例子。
$(function() {
$('#WTrange').slider({
range: true,
values: [2.50, 30.00],
min: 2.50,
max: 30.00,
step: 0.01
}).on("slidechange", function(event, ui) {
alert('Things have changed!');
}).on("slide", function(event, ui) {
if ((ui.values - ui.values[1]) < 3) {
return false;
}
$('#showWT').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct');
$('#minWT').val(ui.values[0]);
$('#maxWT').val(ui.values[1]);
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>
更新
正如您在编辑中所述，您正在使用 .load() 拉入所需的 HTML，然后使用 jQuery UI 滑块对其进行初始化。我会使用 .load() 的完整回调功能。查看更多：https://api.jquery.com/load/
Type: Function( String responseText, String textStatus, jqXHR jqXHR ) A callback function that is executed when the request completes.
$('button').on('click', function() {
$('#pageContent').load('sliderPage.php', function(){
$('#WTrange').slider({
range: true,
values: [2.50, 30.00],
min: 2.50,
max: 30.00,
step: 0.01,
slide: function(event, ui) {
if ((ui.values - ui.values[1]) < 3) {
return false;
}
$('#showWT').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct');
$('#minWT').val(ui.values[0]);
$('#maxWT').val(ui.values[1]);
},
change: function(event, ui) {
alert('Things have changed!');
}
});
});
});
现在元素将存在并且事件将成功绑定。你不需要委派。问题的症结在于您不能委托 .slider() 的初始化。您可以委托 change 和 slide 事件，但不能委托初始 .slider() 调用，因为它不是事件。
更新 2
由于您的内容不能被其他人测试，我在 JSFiddnle 中创建了一个伪测试：https://jsfiddle.net/Twisty/zjeLdmw5/8/
这会将 HTML 返回到 .load() 函数，其方式与您的页面加载内容的方式相同。当我点击按钮时，内容被 HTML 替换，然后 Slider 被初始化。
这表明我建议的代码有效。您的代码可能还有一些其他问题尚不清楚。
我有这个 range 滑块使用 jQuery UI API，它按预期工作但现在我正在尝试将滑块委托给 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:
HTML 在 $(document).ready()
<div id="pageContent">
<button>Show Slider</button>
</div>
注意： jQuery UI 滑块没有 HTML
JS 在 $(document).ready()
$('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() 的 <button> sliderPage.php 将 .load()
HTML 在 sliderPage.php 加载 之后 <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>
注意：现在同一页面上的jQueryUI滑块有HTML
基本问题：
因为 <div class="SliderContainer"> 的 HTML 内容不是 $(document).ready() 上 DOM 的一部分，所以它们的事件必须 .delegate()d 在 DOM 树中.我如何委托此 jQuery UI 滑块以便我的 JS 识别它？
请评论：https://api.jqueryui.com/slider/
这是一个如何使用它的例子。
$(function() {
$('#WTrange').slider({
range: true,
values: [2.50, 30.00],
min: 2.50,
max: 30.00,
step: 0.01
}).on("slidechange", function(event, ui) {
alert('Things have changed!');
}).on("slide", function(event, ui) {
if ((ui.values - ui.values[1]) < 3) {
return false;
}
$('#showWT').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct');
$('#minWT').val(ui.values[0]);
$('#maxWT').val(ui.values[1]);
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>
更新
正如您在编辑中所述，您正在使用 .load() 拉入所需的 HTML，然后使用 jQuery UI 滑块对其进行初始化。我会使用 .load() 的完整回调功能。查看更多：https://api.jquery.com/load/
Type: Function( String responseText, String textStatus, jqXHR jqXHR ) A callback function that is executed when the request completes.
$('button').on('click', function() {
$('#pageContent').load('sliderPage.php', function(){
$('#WTrange').slider({
range: true,
values: [2.50, 30.00],
min: 2.50,
max: 30.00,
step: 0.01,
slide: function(event, ui) {
if ((ui.values - ui.values[1]) < 3) {
return false;
}
$('#showWT').html(ui.values[0] + 'Ct - ' + ui.values[1] + 'Ct');
$('#minWT').val(ui.values[0]);
$('#maxWT').val(ui.values[1]);
},
change: function(event, ui) {
alert('Things have changed!');
}
});
});
});
现在元素将存在并且事件将成功绑定。你不需要委派。问题的症结在于您不能委托 .slider() 的初始化。您可以委托 change 和 slide 事件，但不能委托初始 .slider() 调用，因为它不是事件。
更新 2
由于您的内容不能被其他人测试，我在 JSFiddnle 中创建了一个伪测试：https://jsfiddle.net/Twisty/zjeLdmw5/8/
这会将 HTML 返回到 .load() 函数，其方式与您的页面加载内容的方式相同。当我点击按钮时，内容被 HTML 替换，然后 Slider 被初始化。
这表明我建议的代码有效。您的代码可能还有一些其他问题尚不清楚。