Question

我添加了新的html。但同样的事件不适用于新增的html

<div class="contents" id="contents">
                    <c:forEach var="result" items="${resultList }" varStatus="status">

                        <ul class="shList" id="">
                            <li class="fl">
                                <ul class="top">
                                    <li>${result.appSn}</li>
                                    <li>${result.mkType }</li>
                                    <li>${result.clasType }</li>
                                    <li>${result.appUseGrade }</li>
                                </ul>
                                <div class="bottom">
                                    <p class="fl">- ${result.appNm}</p>
                                    <span class="fr">${result.inptDt}</span>
                                </div> <!--                             <th>앱번호</th> --> <%--                           <td><form:input path="MobileDetailCommand.amtAppCollInfoVO.appSn" readonly="true" /></td> --%>



                            </li>
                            <li class="fr"><img src="${result.appLeaderImg}" alt="" width="60" height="60" /></li>
                        </ul>

                    </c:forEach>


                </div>
                <div style="text-align: center">

这是我的javascript代码，附加了新的html

            html+="<ul class='shList' id=''>";//1
            html+="<li class='fl'>";//2



            html+="<ul class='top'>";//ultop
            html+="<li>" +result.appSn + "</li>";
            html+="<li>" +result.mkType + "</li>";
            html+="<li>" + result.clasType + "</li>";
            html+="<li>" +result.appUseGrade + "</li>";
            html+="</ul>"//ultop


            html+="<div class = 'bottom'>";
            html+="<p class='fl'>"+result.appNm +"</p>";
            html+="<span class='fr'>"+result.inptDt +"</span>";
            html+="</div>"








            html+="</li>";//<li class='fl'>
            //html+="   <li class='fr'><img src='"+result.appLeaderImg+"'alt='' width='60' height='60' /></li>";
            html+="</ul>";//<ul class='shList' id='shList'>

            $("#contents").append(html);

和事件

$(".shList li.fl").on('click',function() {
    // window.location.replace("screenSave.do");
    console.log("clieckeddd");


    $(this).find(".sliding").toggle();

});

事件在旧事件上工作正常但新增加的html不起作用

Answer 1

您正在使用的click（）绑定称为“直接”绑定，它只会将处理程序附加到已存在的元素。它不会受到将来创建的元素的约束。为此，您必须使用on（）。

创建“委托”绑定

更改您的点击事件，如下所示。

$(document).on('click', ".shList li.fl",function() {
    console.log("clieckeddd");
    //$(this).find(".sliding").toggle();
});

单击对附加的html无效

1 个答案: