title: jQuery .prop() returns undefined, while .attr() works as expected for data-*
body: <p>I am simply trying to get a couple of properties from two elements. Getting the property <code>value</code> from the <code>input</code> element works as expected. The problem is with getting the property <code>data-detail</code> property from the <code>button</code> element. It returns <code>undefined</code> when using <code>.prop()</code>, but works as expected when using <code>.attr()</code>.</p>
  
  <p>Can anyone explain this odd behaviour I am witnessing?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="formRow"&gt;
      &lt;label for="firstName"&gt;First name&lt;/label&gt;
      &lt;div class="detailsControlBtns"&gt;
          &lt;button id="editFirstName" class="btn ctaBtn greenBtn editBtn"&gt;Edit&lt;/button&gt;
          &lt;button class="btn ctaBtn greenBtn saveBtn" data-detail="firstName"&gt;Save&lt;/button&gt;
          &lt;button id="closeFirstName" class="btn ctaBtn greyBtn closeBtn"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
      &lt;input type="text" id="firstName" name="firstName" value="[+firstName+]" readonly&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(".saveBtn").on("click", function() {
      var saveBtn = $(this);
      // The following statement yields undefined. When using .attr() it works as expected.
      var detail = saveBtn.prop("data-detail");
      var relevantInput = saveBtn.parent().next();
      // The following statement works as expected.
      var value = relevantInput.prop("value");
      // ...
  });
  </code></pre>