点击不能在附加的html上工作

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"> 

，并适用于这里是我的其中附加了新的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(); 

}); 

事件是JavaScript代码在旧版本上工作正常 但新增附加的html不起作用

事件是旧的 但新追加的HTML做工精细不起作用

事件是旧的 但新追加的HTML做工精细不起作用

Answer 1

的点击（）结合你使用被称为“直接”绑定，它只会将处理程序附加到已存在的元素。它不会被绑定到未来创建的元素上。要做到这一点，你必须使用on（）创建一个“委托”绑定。

更改您的点击事件如下。

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