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

Question

I have some checkboxes which are used to show/hide columns and automatically resize them to fit the screen. I've linked the checkboxes to their relevent columns using a data attribute and try to read this value using jQuery.data(). This gives an error of "undefined is not a function" even though a breakpoint seems to show I have set my variables up properly up to this point.

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
        });
    });
});

by setting a breakpoint I can see that the attribute has been set and the dataset populated.

However, the line var columnId = checkbox.data('column'); leads to the error "Uncaught TypeError: undefined is not a function". What have I done wrong?

JSFiddle

JQuery version is 2.1.1 browser is Chrome 40.0.2214.111 m

Answer 1

You need convert checkbox(which is DOMElement) to jQuery Object

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

Change checkbox.prop('checked') to $(checkbox).prop('checked')

Also in your example there are three elements with same id (id="column-selector"), I've changed to class (class="column-selector"), because id must be unique

Example

Answer 2

You need to cast checkbox to a jQuery element:

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

Answer 3

The problem you are having is in the jQuery .each() the element passed in the second arg in an element not a jQuery object. try this:

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

Answer 4

Some days ago I was getting a similar kind of problem , so what was happening whenever i wanted to get a data-id of a html element by this :-

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

it was throwing this error :-

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

Actually the problem is find()[] is not returning a javascript DOM object so you have to convert it to a DOM element for having these operation , So I did this ->

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

just added put that entire thing in $() that casts these into a DOM object on which you can perform Javascript DOM element related methods.

Answer 5

Not really an answer to your question, but you can also access the current element with the this parameter:

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

It seems that this makes it work in your jFiddle