javascript - bxslider - 幻灯片未使用 JQuery 正确刷新

Question

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

我的解释可能令人困惑，但你可以在这里看到我的 fiddle :
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');
});

我无法使用的解决方案:
将无限循环切换为 false。要求 slider 无限期地滚动幻灯片。

刷新原因:
最终，当他们单击刷新时，将进行 AJAX 调用来更新幻灯片的内容。由于用 4 替换内容不起作用，我们还没有尝试实现 AJAX 调用。

我尝试过的事情:
当我厌倦了这个时，重新加载 slider 似乎不起作用:
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