类型错误：o.element 未定义 - jquery ui

Question

我在用着jquery-ui。两周后我无法解决这个问题。

\n

我不知道为什么点击滑块后出现此错误：

\n

火狐控制台：

\n

TypeError: o.element is undefined[Learn More]  jquery-ui.min.js:6:6058\n

\n

控制台镀铬：

\n

jquery-ui.min.js:6 Uncaught TypeError: Cannot read property \'toggleClass\' of undefined\n    at t.(anonymous function).(anonymous function)._toggleClass (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:6067)\n    at t.(anonymous function).(anonymous function)._addClass (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:5877)\n    at t.(anonymous function).(anonymous function)._mouseCapture (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:14171)\n    at t.(anonymous function).(anonymous function)._mouseCapture (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:1111)\n    at t.(anonymous function).(anonymous function)._mouseDown (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:9414)\n    at t.(anonymous function).(anonymous function)._mouseDown (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:1111)\n    at HTMLDivElement.<anonymous> (http://localhost:8000/assets/frontend/_js/jquery-ui.min.js:6:8701)\n    at HTMLDivElement.dispatch (http://localhost:8000/assets/frontend/_js/jquery-3.1.1.min.js:3:10315)\n    at HTMLDivElement.q.handle (http://localhost:8000/assets/frontend/_js/jquery-3.1.1.min.js:3:8342)\n

\n

---

\n

<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery-3.1.1.min.js"></script>\n<!-- http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js -->\n<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/bootstrap.min.js"></script>\n<!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js -->\n<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jasny-bootstrap.min.js"></script>\n<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/bootstrap-select.min.js"></script>\n<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/persian-datepicker.min.js"></script>\n<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/script.js"></script>\n\n<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery-ui.min.js"></script>\n<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery.ui.touch-punch.min.js"></script>\n<script>\n\n    $(document).ready(function(){\n\n        $( "#slider" ).slider({\n            range: true,\n            min: -10000000,\n            max: -1000,\n            values: [ -8000000, -2000 ],\n            slide: function(event, ui) {\n                $(".amount .min-price").text(addCommas (ui.values[1]*-1) + " \xd8\xb1\xdb\x8c\xd8\xa7\xd9\x84 ");\n                $(".amount .max-price").text(addCommas (ui.values[0]*-1) + " \xd8\xb1\xdb\x8c\xd8\xa7\xd9\x84 ");\n            }\n        });\n\n        $(".amount .min-price").text(addCommas ($("#slider").slider( "values", 1 )*-1  ) + " \xd8\xb1\xdb\x8c\xd8\xa7\xd9\x84 ");\n        $(".amount .max-price").text(addCommas ($("#slider").slider( "values", 0 )*-1  ) + " \xd8\xb1\xdb\x8c\xd8\xa7\xd9\x84 ");\n        // Hover states on the static widgets\n        $( "#dialog-link, #icons li" ).hover(\n            function() {\n                $( this ).addClass( "ui-state-hover" );\n            },\n            function() {\n                $( this ).removeClass( "ui-state-hover" );\n            }\n        );\n\n    });\n\n</script>\n

\n

我的 HTML 代码：

\n

<div class="col-md-12">\n    <div id="slider" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">\n        <div class="ui-slider-range ui-corner-all ui-widget-header">\n\n        </div>\n        <span tabindex="1" class="ui-slider-handle ui-corner-all ui-state-default">\n\n        </span>\n        <span tabindex="2" class="ui-slider-handle ui-corner-all ui-state-default" >\n\n        </span>\n    </div>\n</div>\n

\n

---

\n

//used in slider\nfunction addCommas(nStr){\n    nStr += \'\';\n    x = nStr.split(\'.\');\n    x1 = x[0];\n    x2 = x.length > 1 ? \'.\' + x[1] : \'\';\n    var rgx = /(\\d+)(\\d{3})/;\n    while (rgx.test(x1)) {\n        x1 = x1.replace(rgx, \'$1\' + \',\' + \'$2\');\n    }\n    return x1 + x2;\n}\n

\n

我的网站地址：

\n

http://tahrircenter.com/products

\n

\n

---

\n

我删除了额外的代码，但出现了同样的错误：

\n

\n

它运行良好jsfiddle!!!:

\n

https://jsfiddle.net/Twisty/3gm3sfem/

\n

\n

.toggleClass() 是 jQuery 的一个函数，因此如果您收到错误，表明它未定义，则可能会在其他地方加载另一个版本的 jQuery。或者它根本没有被加载。

\n

\n

Answer 1

我遇到了这个问题，并且解决了。

我不小心将滑块设置为未定义的值。此时，没有产生任何错误。

但是，当我后来尝试移动滑块时，出现错误 o.element is undefined。

当我将滑块设置为合适的值时，问题就消失了。