將圖像添加到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，直到現在，我點擊下一個按鈕圖片獲得追加，但在第二次和第三次按下一個按鈕 - 它不會追加圖片，但只有幻燈片。我不明白爲什麼。奇怪的是，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>