jquery未找到id /表單元格

Question

我正在嘗試編寫動態複選框樹。 我這樣做使用c：forEach語句，然後使用jquery顯示/隱藏相關的後續組複選框。

奇怪的事情發生在jquery中只能識別一些表格單元格。

在下面的代碼中，只有第一組複選框（「upperMostExpertise」）和第二個類別中的第一個複選框（第一個「expertise2」）一樣執行。

有一個請求參數，我以前設置，但我認爲它應該清楚代碼試圖做什麼。

複選框樹在外觀上還不完美，但我仍然想明白爲什麼它沒有正常運行（具體來說，當我點擊某些複選框時，隨後的td單元格不會顯示，而當我點擊在別人身上）。

我不確定問題出在jquery代碼還是動態生成的html代碼。

的HTML代碼：

<table border="1"> 

<script> 

</script> 

      <tr> 

       <td> 

        <c:forEach var="expertise" items="${upperMostExpertise.subExpertise}"> 

         <input type="checkbox" name="${expertise.level}" 
          value="${expertise.name}" id="${expertise.name}"> 
         ${expertise.name}<br> 

        </c:forEach> 

       </td> 

       <c:forEach var="expertise1" items="${upperMostExpertise.subExpertise}"> 

        <c:forEach var="expertise2" items="${expertise1.subExpertise}" 
           varStatus="count"> 

         <c:if test="${count.first}"> 
          <td id="${expertise1.name}" style="display: none"> 
         </c:if> 

         <input type="checkbox" name="${expertise2.level}" 
           value="${expertise2.name}" id="${expertise2.name}"> 
         ${expertise2.name}<br> 

         <c:if test="${count.last}"> 
          </td> 
         </c:if> 

        </c:forEach> 

       </c:forEach> 

       <c:forEach var="expertise1" items="${upperMostExpertise.subExpertise}"> 

        <c:forEach var="expertise2" items="${expertise1.subExpertise}"> 

         <c:forEach var="expertise3" items="${expertise2.subExpertise}" 
            varStatus="count"> 

          <c:if test="${count.first}"> 
           <td id="${expertise2.name}" style="display: none"> 
          </c:if> 

          <input type="checkbox" name="${expertise3.level}" 
            value="${expertise3.name}">${expertise3.name}<br> 

          <c:if test="${count.last}"> 
           </td> 
          </c:if> 

         </c:forEach> 

        </c:forEach> 

       </c:forEach> 

      </tr> 

     </table> 

jQuery代碼：

$(document).ready(function(){ 
       $("input[type='checkbox']").click(function(){ 
        var inputName = $(this).attr("value"); 
        $("td#" + inputName).toggle(); 
        console.log("inputName variable equals " + inputName); 
        console.log("target td cell id is: " + $("td#" + inputName).attr("id")); 
        console.log("id of this table cell is: " + $(this).parents("td").first().attr("id")); 
        console.log("this table cell style attribute is: " + $(this).parents("td").first().attr("style")); 
       }); 
      }); 

Answer 1

您需要動態創建的複選框事件委託，使用.on()這樣的：

$(function(){ 
    $(document).on("click", "input[type='checkbox']", function(){ 
     var inputName = $(this).attr("value"); 
     $("td#" + inputName).toggle(); 
     console.log("inputName variable equals " + inputName); 
     console.log("target td cell id is: " + $("td#" + inputName).attr("id")); 
     console.log("id of this table cell is: " + $(this).parents("td").first().attr("id")); 
     console.log("this table cell style attribute is: " + $(this).parents("td").first().attr("style")); 
    }); 
});