无法从嵌套<li> </li>解除绑定

Question

我有一个函数，允许我通过单击列表项来展开和折叠无序列表，但问题是在最低级别LI我有一个嵌入了复选框的表，当用户点击表时[编辑]显示父li的背景图像。

我看到它的方式有两条主要路线可以解决这个问题，不知何故只是删除了孩子li的背景图像或取消绑定子li的click事件。我试图取消绑定最低级别LI上的单击处理程序，但它只是不起作用。以下是简化版。用户不应该能够点击td单元格。

如果您查看jsfiddle我无法添加将完全复制问题的png文件到您可以看到问题的位置，但只要在子li上触发'alert'就可以告诉孩子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”放在那里以阻止冒泡？