Checkbox click not working from within unordered list item

☆樱花仙子☆ 提交于 2019-12-11 18:18:51

问题


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.

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.

Here's the 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>

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()
    });

回答1:


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.



来源:https://stackoverflow.com/questions/12120231/checkbox-click-not-working-from-within-unordered-list-item

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!