SIR
목록으로

자바스크립트 ajax 이후 바로 이벤트 적용 채택완료

MMrNothing
프로필 보기이 회원 글보기이 회원의 댓글보기
 8년 전 조회 1,999
답변 1
목록

안녕하세요. 

궁금한 점이 있어 이렇게 글을 올립니다. 

 

자바스크립트(제이쿼리)를 이용해서 ajax를 구현했습니다.

아래는 ajax 내용 일부입니다.

Copy 
$.post(rnmLoadmore.ajaxurl, data, function(response){

            $('.wrap').append(response);            

  });

 

html 전체 구성은 아래와 같습니다. 

 

Copy 
<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을 몇번 누르면 전체적으로 아래와 같이 될 겁니다. 

 

Copy 
<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 모두) 찾아 이벤트를 실행하려고 아래와 같이 코드를 짰습니다 

 

Copy 
$("body").on('load', '.ajax', function(){
    $(".aa").before("<span>안녕하세요.</span>");

});

 

하지만, 동작하지 않네요.ㅠ 

어떻게 하면, 이전에 있던 <div class="aa">와 새로 생긴 <div class="aa ajax">에 동시에,

$(".aa").before("<span>안녕하세요.</span>");

라는 이벤트를 넣을 수 있을까요?...ㅠ 

 

헤매고 있는 초보에게 조언을 부탁드립니다... 감사합니다.

#ajax #javascript

답변 1개

채택된 답변
+20 포인트

ajax content가 추가되자마자 이벤트를 적용하는거면 ajax에 append 다음부터 코드를 짜셔도 가능한 것 아닌가요 ?

굳이 그렇게 한 이유가 있나요?

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

아 그렇군요. 감사합니다. 하하;
책으로 학습하다가 첫 코딩을 하다보니.. 하하

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고