Question

我正在尝试编写动态复选框树。我使用c：forEach语句执行此操作，然后使用jquery显示/隐藏相关的后续复选框组。

发生了一些奇怪的事情，因为jquery只能识别一些表格单元格。

在下面的代码中，只有第一组复选框（＆＃34; upperMostExpertise＆＃34;）和第二个类别中的第一个复选框（第一个＆＃34;专业知识2＆＃34;）一样执行。

我之前设置了一个请求参数，但我认为应该清楚代码尝试做什么。

复选框树在美观上并不完美，但我仍然想了解它为什么不能正常运行（具体来说，当我点击某些复选框时，后续的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"));
    });
});

jquery没有找到id / table cell

1 个答案: