bxslider-幻灯片没有用JQuery正确刷新

Question

null

<div class="slide" id="approvals">
  <div class="panel tip-panel" id="num-message">
    <div class="panel-head"><h2>APPROVALS</h2><div class="close">X</div></div>
    <div class="panel-body">
    <p><span id="number">2</span> Approvals pending</p>
    <a href="#" class="link">Link to Approvals</a>
    </div><!-- End Panel Body -->
</div><!-- End Panel -->
<br>
<br>
</div>

$('.boxslider').bxSlider({
    slideWidth: 320,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    infiniteLoop: true,
  });
$('#approvals').on('click', 'div.close', function(){
    var message = $(this).closest('.tip-panel').find('.panel-body');
    $(message).html('4');
});

刷新原因:
最终，当他们单击刷新时，将调用AJAX来更新幻灯片的内容。因为用4 isnt替换内容可以工作，所以我们尝试实现AJAX调用。

我尝试过的事情:
重新加载滑块时似乎不起作用:
http://bxslider.com/examples/reload-slider-settings
这是在这个线程上建议的:
bxslider对动态加载的内容不能正常工作

Answer 1

您需要访问并更改位于所更改幻灯片的克隆版本中的html（向前/向后移动后显示的元素）。

示例：

$('.boxslider').bxSlider({
        slideWidth: 320,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10,
        infiniteLoop: true,
      });
    $('#approvals').on('click', 'div.close', function(){
        var message = $(this).closest('.tip-panel').find('.panel-body');
        $(message).html('4');
        $('.bx-clone#'+$(this).closest('.slide').attr('id')).find('.tip-panel .panel-body').html('4');
    });

小提琴