複選框單擊無法在無序列表項中工作

我無法'檢查'嵌入在可展開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() 
    });

來源

2012-08-25 silvster27

你可以創建一個http://jsfiddle.net/？ – freebird

嗯，單擊事件會通過DOM向上冒泡，並且'返回false;'從單擊處理程序停止點擊的默認行爲，所以...爲什麼您返回false？你可以添加if（event.target.tagName.toLowerCase（）===「input」）return;'（不含'false'）到你的點擊處理程序的開頭，當輸入（包括複選框）點擊。或者，如果（$（event.target）.is（「input」））return;'如果你認爲我的第一個建議沒有足夠的jQuery ... – nnnnnn

您從liclick事件返回false因此事件不會繼續執行復選框。只需從事件處理程序中刪除行return false;，該複選框將正常工作。這是一個jsFiddle。

來源

2012-08-25 08:27:51 mhusaini

我明白了！不能相信我錯過了這一點。唯一的問題是，如果我刪除返回false，點擊事件會冒泡，導致多個'切換'，但我可以使用event.stoppropogation（），而現在一切正常。謝謝！ – silvster27

對，'return false;'具有調用'event.stopPropagation（）'和'event.preventDefault（）'的功能。既然你只想要前者，那麼明確地調用它是有道理的。 – mhusaini

複選框單擊無法在無序列表項中工作

回答

相關問題