Добавление изображений в 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 изображений через ajax и добавляет их к самому слайдеру. Hovewer, до сих пор я добился нажатия следующей кнопки, чтобы добавить фотографии, но во второй и третий раз нажимаем следующую кнопку - она ​​не добавляет фотографии, а только слайды. Я не понимаю, почему. Странно также, что функция alert() внутри:

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

пожары только в первый раз. Таким образом, второй и следующий раз функция обработчика кликов не запускается. Любые идеи о причине, которая происходит? Если он срабатывает в первый раз, но не в следующее время, тогда что-то должно измениться. Но что?

То, что я пытаюсь достичь прямо сейчас, - это каждый клик следующего btn, чтобы добавить 4 фотографии и перейти вперед - чтобы они отображались.

Thankx заранее.

Answer 1

Эта линия:

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

работает только в первый раз, потому что элемент генерируется динамически при вызове «slider.reloadSlider». Так что, если вам нужно это событие, вы должны делегировать:

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

В любом случае, я предлагаю вам использовать bxSlider события: onSlidePrev и onSlideNext.

Сниппет:

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>