title: jQuery plugin's $ collides with jQuery's $
body: <p>I have 3 js files, call them <em>myJavascript.js</em>, <em>myPlugin.js</em> and the <em>jQuery</em> libary.
  <br/>
  The files themselves are relatively long, so I try to convey the issue without copying the entire scripts.
  <br/> 
  In the html file using them, I've included the js files in the following order:<br/></p>
  
  <pre><code>&lt;script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="resources/js/myPlugin.js"&gt;&lt;/script&gt;
  &lt;script src="resources/js/myJavascript.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I've written the plugin in the following structure:<br/>
  <strong><em>myPlugin.js :</em></strong></p>
  
  <pre><code>(function ($) {
      local variables...
  
      //several functions with the form
      $.fn.funcName = function(parameters) { body };
  
      //several function used internally
      function funcName(parameters) { body }
  
  }(jQuery));
  </code></pre>
  
  <p>In <em>myJavascript.js</em>, I'm using only methods defined in the plugin (just like using jQuery methods), and it's working. However, when I tried to invoke a jQuery method (authentic one, not from the plugin) <strong>before</strong> invoking plugin function, I got the error:<br/></p>
  
  <pre><code>Uncaught TypeError: $(...).mazeBoard is not a function
  </code></pre>
  
  <p>To give a concrete example:<br/></p>
  
  <pre><code>    /* when this block exists, the call to mazeBoard throws the error */
      /* when I remove this block, the call to mazeBoard works perfectly */
      {
          $(function () {
              jQuery("#navigationMenu").load("nav.html");
              loadSettings();
          });
      }
      /********************/
      {
          ...local variables...
  
          function getSingleGame() {
              ...body...
              $.getJSON(url, function (data) {
  
                  //this is some function in myJavascript.js
                  var mazeData = makeMazeData(data.Maze, data.Rows, data.Cols);
  
                  //this is call to function from my plugin
                  mymaze = $('#mazeCanvas').mazeBoard(mazeData);
                  alert('success');
              }).fail(function () {
                  alert('error!');
              });
          }
      }
  </code></pre>
  
  <p>Anyone knows what's the problem? If everything seems to be fine, I'll try to add more details.</p>