将图像添加到 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 张图片并向前滑动 - 以便显示它们。

提前致谢。

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>

将图像添加到 bxSlider - 图像仅在第一次单击时添加

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

jquery

append

slide

bxslider