Why does jQuery return undefined when I use .prop() to find a custom data attribute?

Question

I have this HTML generated dynamically via JavaScript:

$(".task-status").live("click", function () {

    alert("data-id using prop: " + $(this).prop("data-id"))
    alert("data-id using data: " + $(this).data("id"))

    alert("data-TaskId using prop: " + $(this).prop("data-TaskId"))
    alert("data-TaskId using data: " + $(this).data("TaskId"))

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="blue-button-bg task-status" data-id="2" data-TaskId="2">
 Scheduled
</div>

When I write alert($(this).prop("data-id")) in a click event it is undefined, but when I do this alert($(this).data("id")) it gives me "2" as expected.

If I change attribute data-id to data-TaskId it returns undefined for both prop() and data().

Can anybody explain why is it so?

JSFiddle Demo

Answer 1

Your data-* attributes are not assigned to DOM element properties.

Use attr() rather than prop():

alert("data-id using prop: " + $(this).attr("data-id"))
alert("data-id using data: " + $(this).data("id"))

alert("data-TaskId using prop: " + $(this).attr("data-TaskId"))
alert("data-TaskId using data: " + $(this).data("TaskId"))

Your data-TaskId data attribute will be converted to lower case. Upper case letters are only used by jQuery's .data() API to convert hypenated attributes data-task-id to camel-cased properties: .data().taskId

JSFiddle