クリックは、追加された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の作業罰金が

Answer 1

クリック動作しない動作しない古いもの が、新しい付加し、HTMLの作業罰金ですusingは「ダイレクト」バインディングと呼ばれ、既に存在する要素にのみハンドラをアタッチします。これは、将来作成される要素に束縛されません。これを行うには、on（）を使用して "委任"バインディングを作成する必要があります。

クリックイベントを以下のように変更します。

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