title: jQuery UI - Slider unbinds after one use
body: <p>I'm still a novice, so please go easy on me!</p>
  
  <p>I'm making a JavaScript game. The game works fine, as do the basics of the user interface, like making menu selections or switching screens. But I'm also trying to implement jQuery UI sliders in one of my options menus, which is where I run into trouble.</p>
  
  <p>I can only use the slider once, after which it becomes "stuck." It responds to mouseover - it'll highlight as though it's ready to scroll - but will not budge if I try to move it again.</p>
  
  <p>So far, I've ruled out any problems with the build of jQuery/jQUI I'm using; the demo page works fine.</p>
  
  <p>I have no idea what the problem might be, but I suspect it has something to do with the way I've put together my UI. The way my UI works is by creating a "View" object that contains pointers to a parent DOM element. I then use jQuery to construct its children and use the "loadElement" method to add it to the view's list of children elements:</p>
  
  <pre><code>function CView (parent, target, visible, jQElements) {
    this.parent = parent;
    this.visible = visible;
    this.parentDisplay = parent.css("display");
    this.parentPosition = parent.css("position");
    this.elements = [];
    for(element in jQElements) {
      this.elements.push(element);
    }
    if (!this.visible) {
      this.parent.css({ // Default to hidden state
        "opacity": 0,
        "display": "none"
      });
    }
    this.parent.appendTo(target);
  };
  
  CView.prototype.loadElement = function(element) {
    element.appendTo(this.parent);
    this.elements.push(element);
    return element;
  };
  </code></pre>
  
  <p>All these elements can be shown and hidden together with a method call on the View object. Currently, hiding a view unbinds all event listeners in the elements of that view. I don't think this is the problem, since I get this problem immediately after creating a new view.</p>
  
  <p>The issue, I think, might be in this code, which is for swapping views- Perhaps I'm unbinding some kind of document-level listener that jQUI uses?</p>
  
  <pre><code>var swapView = GameUI.swapView = function(view, callbacks) {
      $(document).off(); // unbind key listeners
      currentView &amp;&amp; currentView.hideView(); // also unbinds event listeners
      currentView = view;
      view.showView(callbacks);
  };
  </code></pre>
  
  <p>There's one more thing that might be relevant, the way I construct the slider and put it in:</p>
  
  <pre><code>  var $volumeSlider = jQuery("&lt;div/&gt;", {
      class: "options-menu-volume-slider"
    });
    var resetVolumeSlider = function () {
      $volumeSlider.slider({
        range: "min",
        value: GameUI.options.volume,
        min: 0,
        max: 100
      })
    };
    resetVolumeSlider();
  </code></pre>
  
  <p>If you need to see more code, let me know. I really am not sure what's going wrong here. Any and all help is appreciated. (Also, I don't know how to host my game online to demo it. It's basically just an HTML page that runs a bunch of JS.)</p>