jQuery UI 滑块 - 无法调用未定义的 'addClass' 方法

Question

我有一个旧的jQuery UI滑块，几个月前它运作良好，但是现在我似乎得到了一个异常：无法调用未定义的方法'addClass'。我已经检查了传递到滑块中的值，它们都是常规的JavaScript日期。

  $('#dateFilter').click(function() {
    return $('#sliderContainer').slideToggle(200);
  });

  $(function() {
    var endFiling, startFiling;
    startFiling = Date.parse($('#startFiling').val());
    endFiling = Date.parse($('#endFiling').val());
    return $('#filingDateSlider').slider({
      range: true,
      min: startFiling,
      max: endFiling,
      step: 86400000,
      values: [startFiling, endFiling],
      slide: function(event, ui) {
        var eD, end, sD, start;
        sD = new Date(ui.values[0]);
        start = dateFormat(sD);
        eD = new Date(ui.values[1]);
        end = dateFormat(eD);
        $('#filingStartDate').text(start);
        return $('#filingEndDate').text(end);
      }
        });

我出现这个新错误的原因是什么呢？

http://i.imgur.com/xC2E6.jpg

- SCS

---

你能设置断点并逐步执行代码吗？根据我的理解，这个错误似乎是因为“addClass”在某处被调用，而传递给它的值是未定义的。如果你可以逐步执行代码，或许你可以看到这些值是否被正确地初始化了。此外，你最近改变过 jQuery 的版本吗？ - StoriKnow

你有检查日志吗？jQuery UI 有一些 bug，前几天我在一个特定的 datepicker 实现中遇到了一个烦人的 bug，如果同一页中有文本输入，它就无法工作！ - SexyBeast

我猜“Cannot call method 'addClass' of undefined.”是来自你的jquery.js文件？ - Nick Beranek

@NickBeranek 是的，这是来自于我一直使用的从Google CDN链接的jQuery UI js文件。 - SCS

Answer 1

对于阅读此问题的任何人，如果您正在从CDN获取jQuery UI，请尝试从最新版本中获取。我也遇到了这个问题，通过使用更新的jQuery UI版本来解决了它。

- Vinay

---

我在使用一个滚动插件时遇到了同样的问题，于是我将版本号更新为1.8.23并引入到我的项目中，现在它完美地运行了！ - Gilberto Albino

成功了！很高兴我能为某人节省时间。 :-) - Vinay

我希望我能用一百万个赞来点赞这个回答。谢谢！ - Steven Ryssaert

我不得不将jQueryUI从1.8.17更新到1.9.2，现在它又可以正常工作了。谢谢。 - Matt van Andel

由于我在最新的jQueryUI（1.10.3）稳定版本中遇到了这个错误，所以我使用了一个hack get-around：通过在任何其他操作发生之前以编程方式设置滑块的值（对我来说是零），它就可以正常工作...滑块初始化中的"value: 0"出现了某些问题。 - temporary_user_name

Answer 2

我通过在“min”、“max”和“values”中使用整数来解决了这个错误。也许你设置了空值。

jQuery滑块规范说：

• 最大值 默认值：100
• 最小值 默认值：0
• 值 默认值：0

因此，“values”是数字数组。

- Miguel Gil Martínez

---

同上。我将“value”设置为未定义的变量。 - merv

我正在使用.val()从输入中获取我的最小/最大值等，我不得不将它们包装在parseInt()中，这样就解决了我的问题。 - Pete

在我的情况下，我将max设置为NaN。感谢您指引我正确的方向。 - ronen

当我试图从包含非整数内容的无效输入中设置值时，我也遇到过这种情况，因此这肯定是相关的。 - Capsule

Answer 3

对于仍然遇到此问题的人，请确保您添加的值（min，max和values）都是数字而不是字符串！

一直在尝试诊断以下代码失败的问题：

t.slider({
  range : true,
  min   : t.attr('data-min'),
  max   : t.attr('data-max'),
  values: [t.attr('data-min'), t.attr('data-max')],
  step  : 1.00,
  slide : function (e, ui) {
    var
      v = (s == 'price') ? '£' + ui.values[0] + ' - £' + ui.values[1] : ui.values[0] + ' - ' + ui.values[1] + 'kg'
    $('#filter-' + s).html(v)
  },
  stop  : function () {
    Items.filter()
  }
})

由于t.attr()返回的是一个字符串，在 jQuery UI 版本 1.10.1 的第12843行中，Slider 设置valueMouse的过程失败了。它返回的是一个字符串（类似于39.99549.21的形式），而不是一个值（最小值39.99和百分比*最大值549.21相连接的结果）。

希望这能帮到某些人！

- Alex

---

在jQuery中不要使用attr('data-min')，而是使用data('min')，这是HTML5标准。 - Ben Taliadoros

我的问题是将“字符串”而不是“数字”传递给更新滑块值。 - bFunc

Answer 4

我也遇到了最新版本的这个问题。解决方法很简单：使用parseInt()将动态值传递给滑块

jQuery UI 滑块的设置器示例：

    $("#mySlider").slider("option",{min: parseInt(value.min), max:parseInt(value.max),value: parseInt(value.active)});

- Dino

Answer 5

另一个可能性是 - 如果滑块的最小值或最大值缺失，就会出现此错误。如果您的startFiling或endFiling未计算为日期，则在尝试计算新的手柄位置时，滑块代码会失败。

- JvR

Answer 6

使用未修改的jQuery-UI.min.js解决了问题。使用自定义脚本会导致错误，即jQuery-UI-custom.js。

- brian

Answer 7

jQuery UI 滑块插件的最小值和最大值选项只接受数字。因此，根据您的要求将它们解析为整数或浮点数。

有关详细信息，请访问链接- http://api.jqueryui.com/slider/

- Shailesh Bhardwaj