ajax 를 사용하면 자바스크립트가 먹통이 됩니다. 채택완료

안녕하세요. 오늘도 초보는 헤매이고 있습니다.

 

 

<div id="swiper-container-place" class="swiper-container">
    <div class="swiper-wrapper rollroll">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
    </div>
</div>

<script>
    var swiper = new Swiper('#swiper-container-place', {
        slidesPerView: 'auto',
        spaceBetween: 10,
    });
</script>

 

위와 같은 소스를 적용하면 스크립트가 잘 실행되고 스와이프가 잘 동작합니다.

 

그런데 아래처럼 ajax를 이용해 swiper-wrapper 부분을 불러오면 스크립트가 전혀 먹질 않습니다.

어떻게 수정해야 할까요?

 

<div id="swiper-container-place" class="swiper-container">
    <div class="swiper-wrapper rollroll"><!-- ajax_img.php 내용 들어감--></div>
</div>

<script>
    var swiper = new Swiper('#swiper-container-place', {
        slidesPerView: 'auto',
        spaceBetween: 10,
    });
</script>

<script> 
    var lat, lng;        
    $(document).ready(function(){    
    function get_placeitem(pos){ 
      if(pos =='') lat=lng='';
      else {
         lat = pos.coords.latitude;
         lng = pos.coords.longitude;
      }
     $.post("ajax_img.php","lat="+lat+"&lng="+lng, function(data){ 
        if(data.indexOf('swiper-slide') >-1 ) $(".rollroll").append(data);
     });
    }
    
    function errork(error){    get_placeitem(''); }
    if (!navigator.geolocation) get_placeitem('');
    navigator.geolocation.getCurrentPosition(get_placeitem, errork); 
    });    
</script>

 

 

크롬의 개발자 도구로 보면 <div class="swiper-wrapper rollroll">/div> 이 부분에

내용은 정상적으로 잘 들어가 있습니다.

 

 

구글에서 "ajax 페이지에서 자바스크립트" 를 검색해서 읽어 보았지만

검은 것은 글씨요 흰것은 화면이라...ㅠ_ㅠ

 

고수님들의 도움 좀 부탁드립니다.

 

 

 

답변 2개

채택된 답변
+20 포인트

1. 아래처럼 만들고

function swiper_fn(){

    var swiper = new Swiper('#swiper-container-place', {
        slidesPerView: 'auto',
        spaceBetween: 10,
    });

}

---------------------------------------

 if(data.indexOf('swiper-slide') >-1 ) $(".rollroll").append(data);---> 아래처럼 수정

 if(data.indexOf('swiper-slide') >-1 ){

   $(".rollroll").append(data);

   swiper_fn();

}

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

답변에 대한 댓글 1개

감사합니다 균이님.

균이님은 저의 생명을 연장 해주시는 분이십니다
^___^

그대로 적용하니 원하는 게 딱 뜹니다!

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

ajax가 먼저 실행되고 new swiper 가 실행되야할것같네요

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

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

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

로그인
🐛 버그신고