复选框单击在无序列表项中不起作用 [英] Checkbox click not working from within unordered list item
问题描述
我无法选中"嵌入在可扩展UL中的输入复选框.我知道原因与单击绑定有关,但我无法弄清楚.
I am unable to 'check' an input checkbox that is embedded in an expandable UL. I know the reason has something to do with click binding but I just can't figure it out.
UL是动态的,因此我添加了新的li和UL.最低级别的UL包含应选择的lis.但是,当我尝试单击它们时,它只会突出显示标签,而该复选框永远不会被选中.
The UL is dynamic so I add new li's and UL's. The lowest level UL contains lis that should be selectable. However when I try to click on them it just highlights the label and the checkbox never becomes checked.
这是HTML:
<li id="JeffID4" class="collapsed expanded">
Assessment
<ul class="inputs-list" style="display: block;">
<li id="apple">
<label class="checkbox inline">
<input type="checkbox">
ATGM
</label>
</li>
<li id="apple">
<label class="checkbox inline">
<input type="checkbox">
FMS
</label>
</li>
</ul>
</li>
这是javascript/jquery:
Here's the javascript/jquery:
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
//If line item is expandable but has no line items then call the service to retrieve data
if($(event.target).hasClass('collapsed') && $(event.target).find('li').length==0){
$(event.target).children('ul').append("Add New LI's")
$('#expList').find('li:has(ul)').addClass('collapsed');
$('#expList').find('ul').addClass('inputslist'); $(event.target).find('li:has(input)').unbind();
$(event.target).children('ul').hide();
}
//Toggle the lists if they show or not
$(event.target).toggleClass('expanded');
$(event.target).children('ul').slideToggle('medium');
return false;
})
.addClass('collapsed').removeClass('expanded').children('ul').hide();
};
$(document).ready( function() {
prepareList()
});
推荐答案
您要从li
click
事件返回false
,因此该事件永远不会进入复选框.只需从事件处理程序中删除return false;
行,该复选框即可正常工作.这是 jsFiddle .
You are returning false
from the li
click
event so the event never gets to the checkbox. Just remove the line return false;
from the event handler and the checkbox will work normally. Here's a jsFiddle.
这篇关于复选框单击在无序列表项中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!