title: $.extend a jQuery Object in IE8
body: <p>When using $.extend on a jQuery Object in the Widget Factory, IE8 seems to lose the jQuery context on the newly created object. Let me demonstrate.</p>
  
  <p>The following code works in IE9+, Chrome, FireFox</p>
  
  <pre><code>$.widget("a07.Wooh", {
      options: {
          test: "Awesome"
      },
      _testFunc: function() {
          // Perform some operations on the DOM using this.element jQuery Object
          this.element.after("&lt;div class=\"stuff\"&gt;Some cool stuff&lt;/div&gt;").next().hide();
      },
      _testFunc2: function() {
          //Copy the this.element object
          this.element2 = $.extend({}, this.element);
  
          //Perform some operations on the DOM using this.element2 jQuery Object
          this.element2.next().css('color', 'red').show();
      },
      _create: function() {
          this._testFunc();
          this._testFunc2();
      },
      _init: function() {}
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/EasyCo/SS7mw/" rel="nofollow">The working jsfiddle</a></p>
  
  <p>As mentioned above, this code works fine in all major browser <strong>except</strong> IE8. Basically it returns and error message for the <code>this.element2.next().css().show()</code> line:</p>
  
  <blockquote>
    <p>Object doesn't support this property or method</p>
  </blockquote>
  
  <p>The property/methods its referring to are the jQuery methods next(), css() and show()</p>
  
  <p>It looks as if in IE8 the this.element2 has lost it's jQuery context because if I wrap the object in a jQuery function like so: <code>this.element2 = $(this.element2);</code> all is well.</p>
  
  <p><a href="http://jsfiddle.net/SS7mw/9/" rel="nofollow">The IE8 compatible jsfiddle</a></p>
  
  <p><strong>So the question is</strong>, what's going on here? Is this standard behaviour for IE8 or am I incorrectly approaching the situation programatically?</p>