时间戳

首页 > 解决方案 > 如何将 jQuery UI 滑块委托给 DOM？

javascript - 如何将 jQuery UI 滑块委托给 DOM？

问题描述

我有这个使用 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]);
            
        }
        
});

在做了一些谷歌搜索后，我发现了这个潜在的解决方案。但我要么做错了什么，要么它不起作用，因为我似乎无法做对：

失败的 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]);

});

运行此（在 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

有人告诉我，我的问题不够清楚。这是一个更简单且可重现的示例：

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()ssliderPage.php<button>将.load()

单击时加载sliderPage.php 后的<button>HTML

<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

基本问题： 因为 HTML 内容<div class="SliderContainer">不是 DOM 的一部分，所以$(document).ready()他们的事件必须.delegate()在 DOM 树上。如何委托这个 jQuery UI 滑块以便我的 JS 识别它？

标签： javascriptjqueryjquery-uijquery-pluginsjquery-ui-slider

解决方案

请查看：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 Slider 对其进行初始化。我会使用完整的回调功能.load()。查看更多：https ://api.jquery.com/load/

类型：Function(String responseText, String textStatus, jqXHR jqXHR) 请求完成时执行的回调函数。

$('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/

.load()这以与页面加载内容相同的方式将 HTML 回显到函数中。当我单击按钮时，内容将替换为 HTML，然后初始化 Slider。

这显示了我建议的代码有效。您的代码可能还有其他一些尚不清楚的问题。

推荐阅读