我正在尝试加载两个可选择的 jQuery UI 实例，但第二个似乎有问题。我该如何解决这个问题？
这是我的代码：http: //jsfiddle.net/3pKQf/1/
HTML
Div 1
<div id="div1">
<ul id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div><br><br>
Div 2
<div id="div2">
<ul id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
<li class="ui-state-default">13</li>
<li class="ui-state-default">14</li>
<li class="ui-state-default">15</li>
</ul>
</div>
CSS
#selectable .ui-selecting {
background: #C41C7B;
}
#selectable .ui-selected {
background: #C41C7B;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#selectable li {
margin: 0px;
padding: 3px;
float: left;
width: 16px;
height: 16px;
font-size: 10px;
font-family: Arial;
text-align: center;
}
JavaScript
$(function() {
$("#selectable").bind('mousedown', function (e) {
e.metaKey = true;
}).selectable();
});