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

zaqlnxep 于 2023-03-07 发布在 jQuery

关注(0)|答案(4)|浏览(135)

我有这个HTML动态生成通过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>

当我在click事件中写入alert($(this).prop("data-id"))时，它是未定义的，但是当我这样做时，alert($(this).data("id"))会像预期的那样给出**"2"。
如果我将属性data-id更改为data-TaskId，则prop()和data()都返回undefined**。
有人能解释一下为什么会这样吗？
JSFiddle Demo

jquery

来源：https://stackoverflow.com/questions/26379639/why-does-jquery-return-undefined-when-i-use-prop-to-find-a-custom-data-attrib

4条答案

按热度按时间

ccrfmcuu1#

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

});

赞(0）回复(0）举报 2023-03-07

aemubtdh2#

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

});

赞(0）回复(0）举报 2023-03-07

js81xvg63#

HTML5数据属性必须为小写，无法加载驼峰式属性
http://www.sitepoint.com/use-html5-data-attributes/
你也可以使用$（“selector”）.data（“没有数据的小写属性-”）

赞(0）回复(0）举报 2023-03-07

bq8i3lrv4#

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

赞(0）回复(0）举报 2023-03-07

我来回答

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

4条答案

相关问题

热门标签

最新问答