title: javascript $(this).data() not work
body: <p>I wrote some code that sends a value to a database using ajax. However, my alert box shows <code>undefined</code> for the value. I don't understand what my problem is.</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function(){
          $(document).on('click', '#publish', function(){
  
              var status = $(this).data('data-pid');
              alert(status);
              $.ajax
              ({ 
                  url: 'update_about_status.php',
                  data: {"statusValue": status},
                  type: 'post',
                  success: function(result)
                  {
                      $('.modal-box').text(result).fadeIn(700, function() 
                      {
                          setTimeout(function() 
                          {
                              $('.modal-box').fadeOut();
                          }, 2000);
                       });
                  }
              });
          });
      });         
  
  &lt;/script&gt;
  print'&lt;button type="button" id="publish" class="btn btn-info" data-pid="'.$cd[$i][3].'"&gt;Make Publish&lt;/button&gt;';
  </code></pre>