title: JQuery .sortable() only works AFTER page refresh
body: <p>I have a case of a page containing a lot of JQuery, of which almost all of it works. All of it apart from:</p>
  
  <pre><code>private sortableOptions = {
      JSPA: this,
      delay: 50,
      group: "favourites",
      connectWith: ".sel-favourite-groups",
      vertical: false,
      itemSelector: "app-favourite",
      placeholder: "&lt;li class='placeholder favourite list-group-item' style=''&gt;&lt;/li&gt;",
      tolerance: 15,
      onDrop: this.sortDrop,
      onDragStart: this.sortDragStart
  };
  
  
  $list.sortable(this.sortableOptions);
  </code></pre>
  
  <p>This however does work if I refresh the page (press f5 etc).</p>
  
  <p>When not working (on first page load) what I see is that list items are movable(you can click and drag them around), the event <code>onDragStart</code> fires, and the event <code>onDrop</code> fires. However while moving them no placeholder is displayed, and the other elements don't shift position. On drop the moving element just returns to its original location.</p>
  
  <p>The relevant code in question in full is:</p>
  
  <pre><code>private render(): JQuery {
          let $page = this.getTemplate("home");
  
          let $list = $page.find("#home-favourites");
          $list.sortable(this.sortableOptions);
  
          try {
              for (let f = 0; f &lt; this.user.UserSettings.favourites.sites.length; f++) {
                  this.drawFavourite($list, this.user.UserSettings.favourites.sites[f]);
              }
  
              // and do the same for the groups
              for (let g = 0; g &lt; this.user.UserSettings.favourites.groups.length; g++) {
                  let group = this.user.UserSettings.favourites.groups[g];
                  // add the header and list to the DOM
                  let $list = this.drawFavouriteGroup(group);
                  $list.sortable(this.sortableOptions);
  
                  if (group.state == "minimised") {
                      let $li = $list.parent();
                      this.drawMinimisedFavouriteGroup($li, group.name);
                      $li.addClass("collapse");
                  }
  
                  for (let f = 0; f &lt; group.sites.length; f++) {
                      this.drawFavourite($list, group.sites[f]);
                  }
              }
          }
          catch (ex) {
              console.log("EXCEPTION:: Home.render(): ", ex);
          }
  
          return $page;
      }
  </code></pre>
  
  <p>From reviewing other similar issues (normally that JQuery things DON'T work after a refresh) I have already tried:</p>
  
  <ul>
  <li>Adding everything to the DOM then calling <code>.sortable()</code></li>
  <li>Calling <code>.sortable('refresh')</code></li>
  <li>Simplifying the code so the 'groups' above(multiple <code>&lt;ul /&gt;</code>s aren't included</li>
  </ul>
  
  <p>None of these made any difference - never works on first load, always works after page refresh</p>
  
  <p>Also navigating away from the page, and back means the <code>.sortable()</code> doesn't work.</p>
  
  <p>What I can't understand is how a refresh can make it work, shouldn't an initial page load when navigated to - with no cached content - be identical to hitting f5?</p>
  
  <p>As I said at the start, there is A LOT of other jQuery on the page all of which works as expected.</p>
  
  <p>Anyone got any idea what might be going on here?</p>