자바스크립트 ajax 이후 바로 이벤트 적용
본문
안녕하세요.
궁금한 점이 있어 이렇게 글을 올립니다.
자바스크립트(제이쿼리)를 이용해서 ajax를 구현했습니다.
아래는 ajax 내용 일부입니다.
$.post(rnmLoadmore.ajaxurl, data, function(response){
$('.wrap').append(response);
});
html 전체 구성은 아래와 같습니다.
<div id="wrap">
<div id="aa">.. </div>
<div id="aa">.. </div>
<input type="button" id="ajax_button">
<!-- ajax content가 들어올 자리 -->
</div>
위의 ajax_button을 누르면, 위의
<!-- ajax content가 들어올 자리 --> 에
<div id="aa">.. </div> 의 div가 2~3개씩 append()됩니다.
위의 ajax_button을 몇번 누르면 전체적으로 아래와 같이 될 겁니다.
<div id="wrap">
<div class="aa">.. </div> <!--ajax 이전에 있던 div -->
<div class="aa">.. </div> <!--ajax 이전에 있던 div -->
<div class="aa ajax ">.. </div> <!--ajax 이후에 생겨난 div -->
<div class="aa ajax ">.. </div> <!--ajax 이후에 생겨난 div -->
<div class="aa ajax ">.. </div> <!--ajax 이후에 생겨난 div -->
<div class="aa ajax ">.. </div> <!--ajax 이후에 생겨난 div -->
<div class="aa ajax ">.. </div> <!--ajax 이후에 생겨난 div -->
<div class="aa ajax ">.. </div> <!--ajax 이후에 생겨난 div -->
....
<input type="button" id="ajax_button">
</div>
이런 상황에서, 즉 ajax로 content가 추가되자마자 이벤트를 만들기 위해, div id="aa"의 앞에 <span>를 하나 삽입하는 jquery를 걸었습니다. '.ajax'를 가진 element가 ajax에 의해 load 되자마자, '.aa'를 가진 element를 모두(ajax 실행 이전에 있던 elemet와 이후 생겨난 element 모두) 찾아 이벤트를 실행하려고 아래와 같이 코드를 짰습니다
$("body").on('load', '.ajax', function(){
$(".aa").before("<span>안녕하세요.</span>");
});
하지만, 동작하지 않네요.ㅠ
어떻게 하면, 이전에 있던 <div class="aa">와 새로 생긴 <div class="aa ajax">에 동시에,
$(".aa").before("<span>안녕하세요.</span>");
라는 이벤트를 넣을 수 있을까요?...ㅠ
헤매고 있는 초보에게 조언을 부탁드립니다... 감사합니다.
답변 1
ajax content가 추가되자마자 이벤트를 적용하는거면 ajax에 append 다음부터 코드를 짜셔도 가능한 것 아닌가요 ?
굳이 그렇게 한 이유가 있나요?
아 그렇군요. 감사합니다. 하하;
책으로 학습하다가 첫 코딩을 하다보니.. 하하