0

拡張可能なULに埋め込まれている入力チェックボックスを「チェック」できません。その理由がクリックバインディングに関係していることは知っていますが、それを理解することはできません。

ULは動的なので、新しいliとULを追加します。最下位レベルのULには、選択可能なlisが含まれています。ただし、それらをクリックしようとすると、ラベルが強調表示されるだけで、チェックボックスがオンになりません。

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は次のとおりです。

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

1 に答える 1

1

falseイベントから戻っているli clickため、イベントがチェックボックスに到達することはありません。return false;イベントハンドラーから行を削除するだけで、チェックボックスが正常に機能します。これがjsFiddleです。

于 2012-08-25T08:27:51.783 に答える