title: bxslider - slides not being refreshed properly with JQuery
body: <p>I have a carousel that has different HTML messages and we want the users to "slide" through the messages so they view each set of slides. We are using bxSlider and everything is working fine until I change the content of the slide using JQuery. When the user clicks on the X the content of the slide will change, but when the user reaches the end of the slides and slide number 2 is being shown again, slide 2 displays the original HTML content until slide 1 becomes the focus then the content switches back to the JQuery refresh like I want.</p>
  
  <p>My explanation may be confusing but you can see my fiddle here:<br>
  <a href="http://jsfiddle.net/t6dKJ/" rel="nofollow noreferrer">http://jsfiddle.net/t6dKJ/</a>
  <br>
  Steps to recreate:</p>
  
  <ol>
  <li>Click X on approvals box</li>
  <li>Click the left arrow to go backward through the slides</li>
  <li>Watch the approvals box change</li>
  </ol>
  
  <p>HTML for a slide:</p>
  
  <pre><code>&lt;div class="slide" id="approvals"&gt;
    &lt;div class="panel tip-panel" id="num-message"&gt;
      &lt;div class="panel-head"&gt;&lt;h2&gt;APPROVALS&lt;/h2&gt;&lt;div class="close"&gt;X&lt;/div&gt;&lt;/div&gt;
      &lt;div class="panel-body"&gt;
      &lt;p&gt;&lt;span id="number"&gt;2&lt;/span&gt; Approvals pending&lt;/p&gt;
      &lt;a href="#" class="link"&gt;Link to Approvals&lt;/a&gt;
      &lt;/div&gt;&lt;!-- End Panel Body --&gt;
  &lt;/div&gt;&lt;!-- End Panel --&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS options for the bxSlider and the click event for a refresh:</p>
  
  <pre><code>$('.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');
  });
  </code></pre>
  
  <p>Solution I cant use:<br>
  Switch infiniteLoop to false. It is a requirement that the slider keeps scrolling through the slides indefinitely.</p>
  
  <p>Reason for the refresh:<br>
  Eventually when they click the refresh an AJAX call will be made to update the content of the slide. Since replacing the content with 4 isnt working we havent tried to implement the AJAX call yet.</p>
  
  <p>Things I have tried:<br>
  Reloading the slider doesnt seem to work when I tired this:<br>
  <a href="http://bxslider.com/examples/reload-slider-settings" rel="nofollow noreferrer">http://bxslider.com/examples/reload-slider-settings</a>
  <br>
  which was suggested on this thread:<br>
  <a href="https://stackoverflow.com/questions/14196358/bxslider-not-working-properly-for-dynamically-loaded-content">bxslider not working properly for dynamically loaded content</a></p>