当我使用.pr(）查找自定义数据属性时，为什么jQuery返回undefined

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

本文关键字：数据属性 为什么 jQuery undefined 返回 自定义 查找 pr      更新时间：2023-09-26

我通过JavaScript:动态生成了这个HTML

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

当我在点击事件中写alert($(this).prop("data-id"))时，它是未定义的，但当我写alert($(this).data("id"))时，它会给我"2〃如预期。

如果我将属性data-id更改为data-TaskId，则会为prop()和data()返回未定义。

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

JSFiddle演示

您的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

您更新的FIDDLE:/b>

尝试使用.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"))
});

使用attr方法而不是prop。

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

HTML5数据属性必须小写，不能加载驼色大小写属性

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

您还可以使用$（"selector"）.data（"lowcase att without data-"）

相关文章：