javascript - jquery 1.6.2 数据属性的奇怪行为

Question

我通过javascript动态生成了这个html：

<div class="blue-button-bg task-status" data-id="2" data-TaskId="2">
 Scheduled
</div>

查询：

$(".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"))

});

当我在单击事件中写入alert($(this).prop("data-id"))时，它是未定义的，但是当我这样做时，它会按预期alert($(this).data("id"))给我“2” 。

如果我将属性更改data-id为它data-TaskId返回undefined和.prop()data()

谁能解释为什么会这样？

小提琴演示问题

Answer 1

您的data-*属性未分配给 DOM 元素属性。

使用attr()而不是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"))

您的data-TaskId数据属性将转换为小写。大写字母仅被 jQuery 的.data()API 用于将连字符属性转换data-task-id为驼峰式属性：.data().taskId

JSFiddle

Answer 2

您更新的小提琴：

尝试使用.attr()相当.prop()。其次，TaskId应该写成lowercase. 见下文 ：-

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

  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"))

});

Answer 3

HTML5 数据属性必须小写，不能加载驼峰式属性

http://www.sitepoint.com/use-html5-data-attributes/

您也可以使用 $("selector").data("lowecase att without data-")

Answer 4

使用 attr 方法而不是 prop。

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

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"))

});