我有两个用 jquery 制作的选项卡,其中包含单独的可选择项。默认打开的选项卡,可选择的工作正常。转到另一个选项卡时,使用套索进行选择将不起作用。将停止事件添加到可选择项时开始出现问题。
HTML:
<div id="tabs">
<ul>
<li><a href="#div1" id="tab1">Div 1 (0)</a></li>
<li><a href="#div2" id="tab2">Div 2 (0)</a></li>
</ul>
<div id="div1">
<ul class="selectable" id="sel1">
<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>
<div id="div2">
<ul class="selectable" id="sel2">
<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>
JS:
$(function() {
$("#sel1").selectable( {
autoRefresh: false,
stop: function() {
var count = 0;
$( '.ui-selected', this).each(function() {
count++;
});
$('#tab1').html('Div 1 (' + count + ')');
}
});
$("#sel2").selectable( {
autoRefresh: false,
stop: function() {
var count = 0;
$( '.ui-selected', this).each(function() {
count++;
});
$('#tab2').html('Div 2 (' + count + ')');
}
});
$("#tabs").tabs();
});
见例子:http: //jsfiddle.net/3pKQf/8/