title: Hammer.js TypeError: element is null, using inside $(document).ready:
body: <p>I'm trying to get the problem around this: using inside a block like this</p>
  
  <pre><code>$(document).ready(function() { ... } )
  </code></pre>
  
  <p>a function for initialize Hammer.js, like so:</p>
  
  <pre><code>    var area = document.querySelector('#keyboard');
      var hammertime = new Hammer(area);
  
      hammertime.on("pan", { /* options */ }, function(eventu) {
          console.log("pan"); 
      }); 
      hammertime.on("tap", { /* options */ }, function(eventu) {
          console.log("tap!"); 
      }); 
  </code></pre>
  
  <p>When it is just called, this generates:</p>
  
  <blockquote>
    <p>TypeError: element is null </p>
  </blockquote>
  
  <p>and it links to this function inside hammer.js code:</p>
  
  <pre><code>- element.addEventListener(type, handler,
  &gt; false);
  </code></pre>
  
  <p>How should call correctly that? I'm really in stuck for this, jQuery ready seems not the right way... I tried also to move code inside a block like:</p>
  
  <pre><code>window.addEventListener('load', function() { 
  //here thecode above
  }, false);
  </code></pre>
  
  <p>but I get same error.</p>
  
  <p>[edit] In all Hammer.js examples they use to work on DIVs element, here I'm trying doing this on li(st) ones, should be this related to my problem?</p>
  
  <p>I.e:</p>
  
  <pre><code>&lt;ul id="keyboard"&gt;
  &lt;li id="first"&gt;...&lt;/li&gt;
  &lt;li id="second"&gt;...&lt;/li&gt;
  [...]
  &lt;/ul&gt;
  </code></pre>
  
  <p>and then:</p>
  
  <pre><code>var area = document.querySelector('#keyboard');
  </code></pre>
  
  <p>or (same problem):</p>
  
  <pre><code>var area = document.querySelector('#first');
  </code></pre>
  
  <p>Any ideas? Thanks :-)</p>