リスト項目をクリックして順不同リストを展開したり折りたたんだりできる機能がありますが、最下位レベルのLIにチェックボックスが埋め込まれたテーブルがあり、ユーザーがテーブルをクリックすると[編集]親liの背景画像が表示されます。
私の見方では、これを解決するための2つの主要なルートがあります。どういうわけか、子liだけの背景画像を削除するか、子liのクリックイベントのバインドを解除します。最下位レベルのLIでクリックハンドラーのバインドを解除しようとしていますが、機能しません。以下は簡略化されたバージョンです。ユーザーはtdセルをクリックできないようにする必要があります。
jsfiddleを表示する場合、問題を完全に再現するpngファイルを、問題が表示される場所に追加することはできませんが、子liで「アラート」がトリガーされる限り、子liはクリック可能であることがわかります。
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();