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> 

私は何だろう達成するのが好きなのは、各スライドの動きでajax経由でさらに4つの画像をアップロードし、それらをスライダ自体に追加するスライダです。 Hovewer、これまでは、次のボタンをクリックすると達成された写真が追加されましたが、2回目と3回目には次のボタンを押します。写真は追加されず、onllyスライドも追加されます。なぜか分からない。奇妙なのは、その内部のalert（）関数です。

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

火災は初めてです。したがって、クリックハンドラ関数が2回目以降に発生することはありません。理由のアイディアが起こっていますか？それが初めてではあるが、次の時でなければ、何かが変化しなければならない。しかし何？

私が今すぐ達成しようとしているのは、次の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>