jQuery UI元素不起作用

Question

我有以下类型的滑块计算器无效。

无法理解为什么我不能在这里滑动条形码。

<div style="widht: 700px;">
<table class="worksheet-table">
<tbody>
<tr><th>Estimated Years to Retirement</th>
<td>
<div id="years-to-retirement-caption" class="caption">20 years</div>
<div id="years-to-retirement-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 19.1919%;"></a></div>
</td>
</tr>
<tr><th>Estimated Years in Retirement</th>
<td>
<div id="years-in-retirement-caption" class="caption">25 years</div>
<div id="years-in-retirement-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 48.9796%;"></a></div>
</td>
</tr>
<tr><th>Desired Annual Income in Retirement<br> <em>(just think about it in today's dollars)</em></th>
<td>
<div id="desired-annual-income-caption" class="caption">$80,000</div>
<div id="desired-annual-income-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 32%;"></a></div>
</td>
</tr>
<tr><th>Retirement Fund Needed</th>
<td>
<div id="retirement-fund-needed" class="caption">$2,000,000</div>
</td>
</tr>
</tbody>
</table>
<table class="worksheet-table">
<tbody>
<tr class="heading"><th colspan="2">Your Present Situation</th></tr>
<tr><th>Superannuation</th>
<td>
<div id="superannuation-caption" class="caption">$100,000</div>
<div id="superannuation-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 10%;"></a></div>
</td>
</tr>
<tr><th>Savings (excluding home equity)</th>
<td>
<div id="savings-caption" class="caption">$10,000</div>
<div id="savings-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 1%;"></a></div>
</td>
</tr>
<tr><th>Shares</th>
<td>
<div id="shares-caption" class="caption">$20,000</div>
<div id="shares-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 2%;"></a></div>
</td>
</tr>
<tr><th>Equity Investment in Properties</th>
<td>
<div id="equity-caption" class="caption">$0</div>
<div id="equity-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
</td>
</tr>
<tr><th>Other</th>
<td>
<div id="other-caption" class="caption">$0</div>
<div id="other-slider" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">&nbsp;<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
</td>
</tr>
<tr><th>Today's Total Assets</th>
<td>
<div id="current-total-assets" class="caption">$130,000</div>
</td>
</tr>
</tbody>
</table>
</div>

主页网址为http://www.insidewealth.com.au/calculate-your-retirement.html

提前致谢

Answer 1

我假设你没有在任何地方调用过.slider（），但是如果不发布代码就很难说。

$("#years-to-retirement-slider").slider(); // etc

我认为的任何地方。

这里也有一个错字：

<div style="widht: 700px;">

宽度，但不是这个问题。