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