Question

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

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

JQUERY：

$(".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，则会为prop()和data()返回未定义。

有人可以解释为什么会这样吗？

FIDDLE DEMONSTRATING PROBLEM

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

YOUR UPDATED FIDDLE：

尝试使用.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/

你也可以使用$（＆＃34; selector＆＃34;）。data（＆＃34; lowecase att without data - ＆＃34;）

Answer 4

使用attr方法代替prop。

$（＆＃34; .task-status＆＃34;）。live（＆＃34; click＆＃34;，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"))

}）;

jquery 1.6.2具有数据属性的奇怪行为

4 个答案: