동적으로 생성된 요소에 이벤트 바인딩

비동기 방식인 ajax를 통해 php의 db에 있는 데이터를 불러와 html에 뿌려주는 작업을 하는도중

ajax의 결과로 나온 html 요소가 정상 작동하지 않았다.

 

그 이유는 처음에 html 화면이 출력할때는 각각의 요소에 이벤트가 바인딩되었지만 

ajax로 새로 생겨난 html은 이벤트 바인딩이 안 되었던것....

 

[script - ajax]

// 점포 전체 검색
  function search_store(){
    $.ajax({
      type : 'POST',
      url : 'http://192.168.0.2:80/cube2/pass/search',
      data : {
        value:"1"
      },
      success : function(result){
        $('ul').html(result);
      },
      error : function(xtr,status,error){
        alert(xtr +":"+status+":"+error);
      }
    });
  }

[script - 이벤트 바인딩]

$(document).on("click", '.at_l ul li', function(event) {
    var target = $(this);
    location.href ="ip주소?idx="+target.attr('id');
}); 

[html/php]

<article class="at_2">
    <ul>
    <?php
        while($row=$result->fetch_array(MYSQLI_ASSOC)){
            if(strlen($row["pTitle"])>15){ 
            $title=str_replace($row["pTitle"],mb_substr($row["pTitle"],0,8,"UTF8")."...",$row["pTitle"]); //title이 8을 넘어서면 ...표시
            }
            $NO = $row['idx'];
            echo "
                <li id=".$NO.">
                    <img src = '/cube/image_store/".$row['pImage']."' />
                    <h3><span>[등록날짜]</span><span class='date'>&nbsp;2018.03.30&nbsp;</span><span class='seller'>".$row['pSeller']."</span></h3>
                    <p>".$row['pTitle']."<p> 
                </li>
                ";
        }   
    ?>
    </ul>
</article>