title: Reading "data-id" attribute with jQuery
body: <p>I'm trying to use the nice plugin called <a href="http://demos.myjqueryplugins.com/jrating/" rel="nofollow noreferrer">jRating</a> , which supposedly does some kind of AJAX call when I click on the stars. It does it, with the right rate value, but the <code>data-id</code> attribute, which will be an input to the MySQL query in the AJAX-called file, is undefined (NaN). This is the code:</p>
  <p><strong>Demo HTML</strong>:</p>
  <pre><code>&lt;div class=&quot;exemple&quot;&gt; 
     &lt;!-- in this exemple, 12 is the average and 1 is the id of the line to update in DB --&gt;
     &lt;div class=&quot;basic&quot; data-average=&quot;12&quot; data-id=&quot;1&quot;&gt;&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  <p><strong><a href="http://demos.myjqueryplugins.com/jrating/jquery/jRating.jquery.js" rel="nofollow noreferrer">jRating.jquery.js</a></strong>:</p>
  <pre><code>//Line 60:
  //idBox = parseInt($(this).attr('data-id')), // old version, idBox=Nan
  idBox = parseInt($(this).data(&quot;id&quot;)); // my version, still idBox=Nan
  </code></pre>
  <p><strong>edit</strong>:
  the jquery call in the main php page's header:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function(){
      $(&quot;.exemple&quot;).jRating({
        length:10,
        decimalLength:0,
        onSuccess : function(){
          alert('Success : your rate has been saved :)');
        },
        onError : function(){
          alert('Error : please retry');
        }
      });
    });
  &lt;/script&gt;
  </code></pre>
  <p>I can't seem to figure out what's wrong. Please help me to find it.
  Thanks !</p>
  <p><strong>SOLUTION</strong> :</p>
  <p>As @ZachL recognized,
  <code>$(this)</code> , in jRating.jquery.js was referring to div.exemple, whereas the data-id was in div.basic.</p>
  <p>So changing <code>$(this).data(&quot;id&quot;)</code> to <code>$(this).find('.basic').data(&quot;id&quot;)</code> worked.</p>