title: jQuery Functions not executing properly
body: <p>I have three <code>&lt;ul&gt;</code>'s which I want to merge and turn into a slider (I'm using the <a href="http://bxslider.com/" rel="nofollow">bxslider</a>).  It is something like...</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;ul class="products-grid"&gt;
          &lt;li&gt;Product 1&lt;/li&gt;
          &lt;li&gt;Product 2&lt;/li&gt;
          &lt;li&gt;Product 3&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="products-grid"&gt;
          &lt;li&gt;Product 4&lt;/li&gt;
          &lt;li&gt;Product 5&lt;/li&gt;
          &lt;li&gt;Product 6&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="products-grid"&gt;
          &lt;li&gt;Product 7&lt;/li&gt;
          &lt;li&gt;Product 8&lt;/li&gt;
          &lt;li&gt;Product 9&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I execute the below lines of jQuery in the chrome console, one line at a time, everything works perfectly.</p>
  
  <pre><code>jQuery('ul.products-grid').children('li').appendTo('ul.products-grid:first'); 
  jQuery('ul.products-grid').not(':first').remove(); 
  jQuery('ul.products-grid').bxSlider({
      slideWidth: 200,
      minSlides: 1,
      maxSlides: 3,
      slideMargin: 10
  });
  </code></pre>
  
  <p>But when I try to execute the jQuery in the php/html template or in the chrome console all at once, only the first line executes and I'm left with...</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;ul class="products-grid"&gt;
          &lt;li&gt;Product 1&lt;/li&gt;
          &lt;li&gt;Product 2&lt;/li&gt;
          &lt;li&gt;Product 3&lt;/li&gt;
          &lt;li&gt;Product 4&lt;/li&gt;
          &lt;li&gt;Product 5&lt;/li&gt;
          &lt;li&gt;Product 6&lt;/li&gt;
          &lt;li&gt;Product 7&lt;/li&gt;
          &lt;li&gt;Product 8&lt;/li&gt;
          &lt;li&gt;Product 9&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="products-grid"&gt;
      &lt;/ul&gt;
      &lt;ul class="products-grid"&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea how I can fix this?  It seems to have something to do with the order in which the code is executing.</p>
  
  <h2>UPDATE</h2>
  
  <p>I noticed that in the console if I put the debugger on just before the code executes I get the below error after the <li>'s have been appended.</p>
  
  <pre><code>Uncaught ReferenceError: optionsPrice is not defined    bundle.js 110
  </code></pre>
  
  <p>This must be causing some conflict.  Here is the full function from bundle.js</p>
  
  <pre><code>reloadPrice: function() {
      var calculatedPrice = 0;
      var dispositionPrice = 0;
      var includeTaxPrice = 0;
      for (var option in this.config.selected) {
          if (this.config.options[option]) {
              for (var i=0; i &lt; this.config.selected[option].length; i++) {
                  var prices = this.selectionPrice(option, this.config.selected[option][i]);
                  calculatedPrice += Number(prices[0]);
                  dispositionPrice += Number(prices[1]);
                  includeTaxPrice += Number(prices[2]);
              }
          }
      }
  
      var event = $(document).fire('bundle:reload-price', {
          price: calculatedPrice,
          priceInclTax: includeTaxPrice,
          dispositionPrice: dispositionPrice,
          bundle: this
      });
      if (!event.noReloadPrice) {
          optionsPrice.specialTaxPrice = 'true';  // line 110
          optionsPrice.changePrice('bundle', calculatedPrice);
          optionsPrice.changePrice('nontaxable', dispositionPrice);
          optionsPrice.changePrice('priceInclTax', includeTaxPrice);
          optionsPrice.reload();
      }
  
      return calculatedPrice;
  },
  </code></pre>
  
  <p>And within the <li>'s there is a script tag that have. . . </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          //&lt;![CDATA[
          var bundle = new Product.Bundle({"options":{"98":{"selections":{"2307":{"qty":1,"customQty":"0","price":2.5,"priceInclTax":1.88,"priceExclTax":1.88,"priceValue":0,"priceType":"0","tierPrice":{"32000-7":{"price_id":"738","website_.......
  </code></pre>
  
  <p>The full stack trace show's my line of code beforehand.</p>