title: jquery custom data attribute not working inside div tag
body: <p>I am using this div code </p>
  
  <pre><code>&lt;div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and trying to print the values like </p>
  
  <pre><code> japp.init = function () {
    console.log($("div").data("role"));
    console.log($("div").data("lastValue"));
    console.log($("div").data("hidden"));
    console.log($("div").data("options").name);
  });
  </code></pre>
  
  <p>This works fine if I put the above div tag directly inside body but as I put the div tag inside any other div tag it does not work and says undefined.</p>
  
  <pre><code>   &lt;div class="page"&gt;
     &lt;div data-role="page" data-last-value="43" data-hidden="true" data- options='{"name":"John"}'&gt;&lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>console prints undefined for above html.</p>
  
  <p>Please let me know if anything is not clear</p>