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

Question

我有一个包含不同 HTML 消息的轮播，我们希望用户“滑动”浏览这些消息，以便他们查看每组幻灯片。我们正在使用 bxSlider 并且一切正常，直到我使用 JQuery 更改幻灯片的内容。当用户点击 X 时，幻灯片的内容会发生变化，但是当用户到达幻灯片的末尾并且再次显示幻灯片编号 2 时，幻灯片 2 会显示原始 HTML 内容，直到幻灯片 1 成为焦点然后内容切换回我想要的 JQuery 刷新。

我的解释可能令人困惑，但你可以在这里看到我的小提琴：
http://jsfiddle.net/t6dKJ/
重建步骤：

1. 在批准框上单击 X
2. 单击左箭头可向后浏览幻灯片
3. 观察审批框的变化

幻灯片的 HTML：

<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>

bxSlider 的 JS 选项和刷新的点击事件：

$('.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 替换内容不起作用，我们还没有尝试实现 AJAX 调用。

我尝试过的事情：
当我厌倦这个时，重新加载滑块似乎不起作用：
http://bxslider.com/examples/reload-slider-settings
这是在此线程上建议的：
bxslider not working properly for dynamically loaded content

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');
    });

Fiddle