javascript - TypeError : o. 元素未定义 - jquery ui

Question

我正在使用 jquery-ui。 2 周后我无法解决这个问题。

我不知道为什么在点击 slider 后出现这个错误:

控制台火狐:

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

控制台 chrome:

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

---

<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery-3.1.1.min.js"></script>
<!-- http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js -->
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/bootstrap.min.js"></script>
<!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js -->
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jasny-bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/persian-datepicker.min.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/script.js"></script>

<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://localhost:8000/assets/frontend/_js/jquery.ui.touch-punch.min.js"></script>
<script>

    $(document).ready(function(){

        $( "#slider" ).slider({
            range: true,
            min: -10000000,
            max: -1000,
            values: [ -8000000, -2000 ],
            slide: function(event, ui) {
                $(".amount .min-price").text(addCommas (ui.values[1]*-1) + " ریال ");
                $(".amount .max-price").text(addCommas (ui.values[0]*-1) + " ریال ");
            }
        });

        $(".amount .min-price").text(addCommas ($("#slider").slider( "values", 1 )*-1  ) + " ریال ");
        $(".amount .max-price").text(addCommas ($("#slider").slider( "values", 0 )*-1  ) + " ریال ");
        // Hover states on the static widgets
        $( "#dialog-link, #icons li" ).hover(
            function() {
                $( this ).addClass( "ui-state-hover" );
            },
            function() {
                $( this ).removeClass( "ui-state-hover" );
            }
        );

    });

</script>

我的 HTML 代码:

<div class="col-md-12">
    <div id="slider" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
        <div class="ui-slider-range ui-corner-all ui-widget-header">

        </div>
        <span tabindex="1" class="ui-slider-handle ui-corner-all ui-state-default">

        </span>
        <span tabindex="2" class="ui-slider-handle ui-corner-all ui-state-default" >

        </span>
    </div>
</div>

---

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

我的网站地址:

http://tahrircenter.com/products

---

我删除了额外的代码，但我得到了同样的错误:

它在 jsfiddle 上工作正常!!!:

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

.toggleClass() is a function of jQuery, so if you're getting an error that it's undefined, then it's possible another version of jQuery may be loaded elsewhere. Or it's not being loaded at all.

Answer 1

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

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

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

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