Adding images to bxSlider - images add only on first time clicking

Question

I have following code:

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>

What I would like to achieve is a slider that on each slide movement uploadds more 4 pics via ajax and appends them to the slider itself. Hovewer, up till now I achieved on click of next button pics get appended, but on the second and third time pressing the next button - it does not append the pics but onlly slides. I don't understand why. Weird is also that alert() function inside the:

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

fires only the first time. So the second and following times the click handler function doesn't get fired. Any ideas of a reason that is happening? If it fires the first time but not the following times then something must get changed. But what?

What I try to achieve right now is on each click of next btn to append 4 pics and slide forward - so that they are being displayed.

Thankx in advance.

Answer 1

This line:

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

works only the first time because the element is generated dynamically when you call "slider.reloadSlider". So, if you need this event you must delegate it:

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

In any case I suggest you to use the bxSlider events: onSlidePrev and onSlideNext.

The snippet:

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>