title: How to hide a div after being appended to another div in jQuery?
body: <p>I need to hide a div (this.elmWheel) after an ajax call is made .loadUrl().</p>
  
  <p>Using this code I am not able to hide the div.
  What am I doing wrong here?
  I am using jquery 1.4.2</p>
  
  <pre><code>var Viewer = function(url) {
          var scope = this;
          this.elm = '#viewer';
          this.elmWheel = '#loader-wheel';
          this.url = url;
          this.init = function() {
              this.loadWheelInit();
              this.loadUrl();
          };
          this.loadWheelInit = function() {
              $('&lt;div id="' + scope.elmWheel + '"&gt;Loading ...&lt;/div&gt;').appendTo(this.elm);
          };
          this.loadWheelHide = function() {
              $(this.elmWheel).hide();
              console.log('hide');
          };
          this.loadUrl = function() {
              // simulate loading
              setTimeout(function() {
                  // fetch img from api
                  $.get(this.url, function(data) {
                      scope.loadWheelHide();
                      console.log('show image');
                      // add img to the dom
                      var img = $('&lt;img id="img"&gt;');
                      img.attr('src', this.url);
                      img.appendTo(scope.elm);
  
  
                  });
              }, 2000);
          };
      };
  
  
  
          &lt;div id="viewer" class=""&gt;
  
          &lt;/div&gt;  
  </code></pre>
  
  <p>I am creating an instance with this code, image an Loadind wheel are appended correctly, just not able to hide it</p>
  
  <pre><code>    var viewer = new Viewer('img/1.jpg');
      viewer.init();
  </code></pre>