web-dev-qa-db-ja.com

未定義をスローするjQuery.data（key）は関数ではありません

列を表示/非表示にし、画面に合わせて自動的にサイズを変更するために使用されるいくつかのチェックボックスがあります。チェックボックスを関連する列にデータ属性を使用してリンクし、この値を jQuery.data（） を使用して読み取ろうとしました。これにより、ブレークポイントが変数をこの時点まで適切に設定したことをブレークポイントが示しているように見えても、「未定義は関数ではありません」というエラーが発生します。

[〜＃〜] 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
        });
    });
});
_

ブレークポイントを設定することで、属性が設定され、データセットが設定されたことがわかります。

attribute and dataset values

ただし、var columnId = checkbox.data('column');という行は、「Uncaught TypeError：undefined is not a function」というエラーを引き起こします。何が悪いのですか？

JSFiddle

JQueryのバージョンは2.1.1、ブラウザはChrome 40.0.2214.111 m

jqueryhtmlcustom-data-attribute
17
Andy Nichols

checkbox（DOMElement）をjQueryオブジェクトに変換する必要があります

_var columnId = $(checkbox).data('column');
_

checkbox.prop('checked')を$(checkbox).prop('checked')に変更します

また、あなたの例には同じid（_id="column-selector"_）の3つの要素があります。idmustは一意であるため、クラス（_class="column-selector"_）に変更しました

Example

26
Alexander T.

チェックボックスをjQuery要素にキャストする必要があります。

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

あなたが抱えている問題は、jQuery .each（）要素の2番目の引数で渡される要素not jQueryオブジェクトです。これを試して：

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

先日、私は同様の種類の問題を抱えていたので、これによってhtml要素のデータIDを取得したいと思ったときに何が起こっていたのでしょうか。

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

それはこのエラーを投げていました：-

捕捉されなかったTypeError：$（...）。find（...）[0] .dataは関数ではありません（…）

実際の問題は、find（）[]がJavaScript DOMオブジェクトを返さないことです。そのため、これらの操作を行うには、DOM要素に変換する必要があります。

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

追加したばかりのすべてを$（）に入れて、JavaScriptオブジェクトのDOM要素関連のメソッドを実行できるDOMオブジェクトにこれらをキャストします。

2
Partha Roy

実際の質問への回答ではありませんが、thisパラメータを使用して現在の要素にアクセスすることもできます。

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

これはあなたのjFiddleでそれを機能させるようです

0
Arcturus