web-dev-qa-db-fra.com

jQuery.data (clé) jeter indéfini n'est pas une fonction

J'ai quelques cases à cocher qui sont utilisées pour afficher/masquer les colonnes et les redimensionner automatiquement pour les adapter à l'écran. J'ai lié les cases à cocher à leurs colonnes pertinentes à l'aide d'un attribut de données et j'ai essayé de lire cette valeur à l'aide de jQuery.data () . Cela donne une erreur "Undefined n'est pas une fonction" même si un point d'arrêt semble indiquer que j'ai correctement configuré mes variables jusqu'à présent.

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

en définissant un point d'arrêt, je peux voir que l'attribut a été défini et que le jeu de données a été rempli.

attribute and dataset values

Cependant, la ligne var columnId = checkbox.data('column'); conduit à l'erreur "Uncaught TypeError: undefined n'est pas une fonction". Qu'est ce que j'ai mal fait?

JSFiddle

La version de JQuery est 2.1.1 navigateur est Chrome 40.0.2214.111 m

jqueryhtmlcustom-data-attribute
13
Andy Nichols

Vous avez besoin de convertir checkbox (qui est DOMElement) en jQuery Object 

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

Remplacez checkbox.prop('checked') par $(checkbox).prop('checked')

De plus, dans votre exemple, trois éléments ont le même identifiant (id="column-selector"). J'ai changé pour class (class="column-selector"), car id doit être unique.

Example

19
Alexander T.

Vous devez convertir la case à cocher en un élément jQuery:

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

Le problème que vous rencontrez est dans jQuery .each () l’élément passé dans le deuxième argument dans un objet pas un objet jQuery. essaye ça:

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

Il y a quelques jours, je rencontrais un problème similaire, . Par conséquent, que se passe-t-il chaque fois que je souhaite obtenir l'ID de données d'un élément html de cette manière: - 

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

il jetait cette erreur: - 

TypeError non capturé: $ (...). Find (...) [0] .data n'est pas une fonction (…)

En fait, le problème est que find () [] ne renvoie pas d'objet DOM javascript, vous devez donc le convertir en élément DOM pour pouvoir effectuer ces opérations. J'ai donc fait ceci -> 

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

vient d’ajouter tout cela dans $ () qui les convertit en un objet DOM sur lequel vous pouvez exécuter des méthodes Javascript relatives aux éléments DOM.

2
Partha Roy

Ce n'est pas vraiment une réponse à votre question, mais vous pouvez également accéder à l'élément actuel avec le paramètre this: 

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

Il semble que cela le fait fonctionner dans votre jFiddle

0
Arcturus