jQuery.data(key) 抛出 undefined 不是函数

Question

我有一些复选框用于 show/hide 列并自动调整它们的大小以适合屏幕。我已经使用数据属性将复选框链接到它们的相关列，并尝试使用 jQuery.data() 读取该值。这给出了 "undefined is not a function" 的错误，即使断点似乎显示我已经正确设置了我的变量到这一点。

HTML

<div class="col-xs-12">
    <span>Show or hide columns:</span>
    <input type="checkbox" checked="checked" id="column-selector" data-column="selectioncolumn" />Selection via dropdowns
    <input type="checkbox" checked="checked" id="column-selector" data-column="listcolumn" />Selected items
    <input type="checkbox" checked="checked" id="column-selector" data-column="mapcolumn" />Map
</div>

<div id="selectioncolumn" class="col-xs-4">
    Div 1
</div>
<div id="listcolumn" class="col-xs-4">
    Div 2
</div>
<div id="mapcolumn" class="col-xs-4">
    Div 3
</div>

jQuery

$(document).ready(function () {
    $('#column-selector').on('change', function () {
        var numberOfColumns = $('#column-selector:checked').length;
        var sizeOfVisibleColumn = numberOfColumns === 0 ? 4 : 12 / numberOfColumns;
        var columnClass = 'col-xs-' + sizeOfVisibleColumn;
        $.each($('#column-selector'), function (i, checkbox) {
            var columnId = checkbox.data('column'); //Error occurs here
            //More stuff
        });
    });
});

通过设置断点，我可以看到已设置属性并填充数据集。

然而，行 var columnId = checkbox.data('column'); 导致错误 "Uncaught TypeError: undefined is not a function"。我做错了什么？

JSFiddle

JQuery 版本是 2.1.1 浏览器是 Chrome 40.0.2214.111 m

Answer 1

您需要将 checkbox（即 DOMElement）转换为 jQuery 对象

var columnId = $(checkbox).data('column');

将checkbox.prop('checked')更改为$(checkbox).prop('checked')

同样在你的例子中有三个元素具有相同的id（id="column-selector"），我已经改为class（class="column-selector"），因为id 必须独一无二

Example

Answer 2

您需要将复选框投射到 jQuery 元素：

 $.each($('#column-selector'), function (i, checkbox) {
    var columnId = $(checkbox).data('column'); //Error occurs here
    //More stuff
 });

Answer 3

您遇到的问题是在 jQuery .each() 中传递给元素中第二个参数的元素 而不是 一个 jQuery 对象.试试这个：

$.each($('#column-selector'), function (i, checkbox) {
    var columnId = $(checkbox).data('column'); //Error occurs here
    //More stuff
});

Answer 4

不是您问题的真正答案，但您也可以使用 this 参数访问当前元素：

  function (i) {
                var columnId = $(this).data('column');
                ...

这似乎使它在您的 jFiddle 中工作

Answer 5

几天前我遇到了类似的问题，所以每当我想通过这个获得 html 元素的数据 ID 时会发生什么：-

$(document).find(".tile")[0].data("id")

它抛出了这个错误：-

Uncaught TypeError: $(...).find(...)[0].data is not a function(…)

实际上问题是 find()[] 没有返回 javascript DOM 对象，所以你必须将它转换为 DOM 元素才能进行这些操作，所以我这样做了 ->

$($(document).find(".tile")[0]).data("id")

刚刚添加将整个内容放入 $() 中，将其转换为 DOM 对象，您可以在该对象上执行 Javascript DOM元素相关方法。

jQuery.data(key) 抛出 undefined 不是函数

jQuery.data(key) throwing undefined is not a function

jquery

html

custom-data-attribute