bxSlider에 이미지를 추가 - 이미지를 클릭하면 처음에만 추가

Question

내가 코드를 다음 있습니다 :

JQUERY ---

var slider = $('.slider1').bxSlider({ 
    mode: 'horizontal', 
    slideWidth: 200, 
    minSlides: 2, 
    maxSlides: 4, 
    slideMargin: 10 
}); 

$('.bx-next').click(function(e){ 
e.preventDefault(); 
$('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>'); 
$('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>'); 
$('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>'); 
$('.slider1').append('<div class="slide"><img src="images/57d54a2e53324.png"></div>'); 
slider.reloadSlider(); 
slider.goToNextSlide(); 
}); 

HTML ----

<div class="slider1"> 
      <?php 
      $query = "SELECT * FROM vid LIMIT 4"; 
      $result = mysqli_query($conn,$query); 
      if(!$result){echo 'error with query';} 
      while ($row = mysqli_fetch_assoc($result)) { ?> 
       <div class="slide"> 
       <img src='<?php echo "images/".$row['namev_id'].".png";?>' alt="Bacn"> 
       </div> 
      <?php } ?>     
    </div> 

내가 것 달성하기를 좋아하는 슬라이더는 각 슬라이드에서 아약스를 통해 4 개의 사진을 업로드하고 슬라이더 자체에 추가합니다. Hovewer, 지금까지 나는 다음 버튼을 클릭했을 때 얻은 사진을 추가했지만 두 번째와 세 번째로 다음 버튼을 누르면 사진이 추가되지는 않지만 onlly 슬라이드가 추가됩니다. 나는 왜 그런지 이해하지 못한다. 이상한 내용은 그 내부의 alert() 함수입니다.

$('.bx-next').click(function(e){ 

화재는 처음에만 발생합니다. 따라서 클릭 핸들러 기능이 두 번째 및 다음 번에 시작되지 않습니다. 어떤 이념이 일어나고 있는거야? 처음으로 발생하지만 다음 번에 발생하지 않으면 무언가가 변경되어야합니다. 근데 뭐?

내가 지금 시도하는 것은 다음 btn을 클릭 할 때마다 4 장의 사진을 추가하고 앞으로 슬라이드하는 것입니다. 그래서 그들이 표시되고 있습니다.

감사합니다.

Answer 1

이 줄 :

$('.bx-next').click(function(e){ 

는 "slider.reloadSlider"호출 할 때 요소가 동적으로 생성되기 때문에 처음에만 작동합니다. 그래서, 당신은이 이벤트를 필요로하는 경우 당신은 그것을 위임해야합니다 onSlidePrev 및 onSlideNext : 난 당신이 bxSlider 이벤트를 사용하는 것이 좋습니다 어떤 경우

$(document).on('click', '.bx-next', function(e){ 

합니다.

코드 조각 :

function addNewImages(slider) { 
 
    $('.slider1').append('<div class="slide"><img src="http://bxslider.com/images/730_200/tree_root.jpg"></div>'); 
 
    $('.slider1').append('<div class="slide"><img src="http://bxslider.com/images/730_200/hill_road.jpg"></div>'); 
 

 
    slider.reloadSlider(); 
 
    $('.bx-pager.bx-default-pager .bx-pager-item:last a').trigger('click'); 
 
} 
 

 
var slider = $('.slider1').bxSlider({ 
 
    mode: 'horizontal', 
 
    slideWidth: 200, 
 
    minSlides: 2, 
 
    maxSlides: 2, 
 
    slideMargin: 10, 
 
    onSlidePrev: function ($slideElement, oldIndex, newIndex) { 
 
    //addNewImages(this); 
 
    }, 
 
    onSlideNext: function ($slideElement, oldIndex, newIndex) { 
 
    //addNewImages(this); 
 
    } 
 
}); 
 

 
$(document).on('click', '.bx-next', function(e){ 
 
    addNewImages(slider); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<link href="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.css" rel="stylesheet"> 
 
<script src="https://rawgit.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js"></script> 
 

 

 
<div class="slider1"> 
 
    <div class="slide"> 
 
     <img src='http://bxslider.com/images/home_slides/houses.jpg' alt="Bacn"> 
 
    </div> 
 
    <div class="slide"> 
 
     <img src='http://bxslider.com/images/home_slides/hillside.jpg' alt="Bacn"> 
 
    </div> 
 
    <div class="slide"> 
 
     <img src='http://bxslider.com/images/home_slides/picto.png' alt="Bacn"> 
 
    </div> 
 

 
</div>