无法解除绑定嵌套的点击<li>

Question

我有一个功能，可以通过单击列表项来展开和折叠无序列表，但是问题出在最低级别的LI中，我有一个带有嵌入式复选框的表，并且当用户单击表时[edit]显示了父级li的背景图像。

我看到它有两种主要方法可以解决此问题，以某种方式仅删除子li的背景图像或取消绑定子li的click事件。 我正在尝试解除对最低级别LI的单击处理程序的绑定，但是它将无法正常工作。 以下是简化版本。 用户不应点击td单元格。

如果您查看jsfiddle，则无法添加将问题完全复制到可以看到问题的png文件，但是只要在子li上发出“警报”，您就可以告诉子li仍然可单击。

http://jsfiddle.net/3CgQ6/9/

的HTML

<ul id="expList">
  <li>Category 1
     <ul>
        <li class="detailLI"> Category 1.1
           <table>
             <tr><td><input type="checkbox"></td><td>Part A</td></tr>
             <tr><td><input type="checkbox"></td><td>Part B</td></tr>
             <tr><td><input type="checkbox"></td><td>Part C</td></tr>
           </table>
        </li>
        <li class="detailLI"> Category 1.2
           <table>
             <tr><td><input type="checkbox"></td><td>Part D</td></tr>
             <tr><td><input type="checkbox"></td><td>Part E</td></tr>
           </table>
        </li>
     </ul>
  </li>
</ul>

的JavaScript

    $('#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){                  
                retrieveResults($(event.target));
            }
            //Toggle the lists if they show or not
            $(event.target).toggleClass('expanded');
            $(event.target).children('ul').slideToggle('medium');
            event.stopPropagation();
            $('.detailLI').unbind("click");
        })
        .addClass('collapsed')
            .removeClass('expanded')
            .children('ul').hide();

Answer 1

使用on（）和off（）绑定/取消绑定事件。 从jQuery 1.7开始，所有其他绑定/取消绑定方法都已弃用。

Answer 2

为什么不将click事件添加到复选框元素，然后将“ event.stopPropagation”放在此处以停止冒泡呢？