TypeError: Object.defineProperty called on non-object JQUERY

Question

I have this error in Jquery when I try to each an array of HTML elements and handle onclick of that element.

Object.keys(collapsibles).forEach(function (key){
            $(collapsibles[key]).on('click' , function( e ) {
                e.preventDefault();
                const id = $(this).data("id");
                if (id !== _that.currentId) {
                    _that.closeCurrentOpen();
                    $(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
                    $(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
                    return _that.currentId = id;
                } else {
                    return _that.closeCurrentOpen();
                }
            });
        });

The error is appear in this line

$(collapsibles[key]).on('click' , function( e ) {

Collapsibles value

var collapsibles = $('[data-behavior="collapsible"]');

Can you narrow down where this error occurs? Do we need all this code to get this error? — Frank Modica
– Frank Modica, Commented Jul 23, 2018 at 13:32
It seems collapsibles[key] makes this error. What is collapsibles? — Ali Soltani
– Ali Soltani, Commented Jul 23, 2018 at 14:17
Collapsibles is an array of elements $('[data-behavior="collapsible"]'); — Santiago D'Antuoni
– Santiago D'Antuoni, Commented Jul 23, 2018 at 14:25

Ali Soltani · Accepted Answer · 2018-07-23 14:58:16Z

3

Code below has makes error because $(collapsibles[key]) is not a jQuery object:

$(collapsibles[key]).on('click' , function( e ) {//...});

Please see this fiddle. I simulated your code in that. You can see collapsibles in console that seems you didn't think it's a array that it's not suitable for you.

You can use this code instead (jsFiddle):

$.each(collapsibles, function() {
  $(this).on('click', function() {
   // ...
  });
});

answered Jul 23, 2018 at 14:58

Ali Soltani

10k5 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bergi · Accepted Answer · 2018-07-23 15:08:16Z

Uh, var collapsibles = $('[data-behavior="collapsible"]'); is not an array but rather a jQuery collection object. And you should not iterate array-like objects like that, neither with for … in nor with Object.keys(…).forEach.

For jQuery collections, just use .each, or don't use it at all but just call the .on method on it directly which will install the listener on all of the selected elements.

var collapsibles = $('[data-behavior="collapsible"]');
collapsibles.each(function() {
    $(this).on('click', function(e) {
        e.preventDefault();
        const id = $(this).data("id");
        if (id !== _that.currentId) {
            _that.closeCurrentOpen();
            $(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
            $(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
            return _that.currentId = id;
        } else {
            return _that.closeCurrentOpen();
        }
    });
});

var collapsibles = $('[data-behavior="collapsible"]');
collapsibles.on('click', function(e) {
    e.preventDefault();
    const id = $(this).data("id");
    if (id !== _that.currentId) {
        _that.closeCurrentOpen();
        $(`[data-target="${$(this).data("id")}"]`).slideDown().addClass('open');
        $(`[data-img="${$(this).data("id")}"]`).slideDown().addClass('arrowOpened');
        return _that.currentId = id;
    } else {
        return _that.closeCurrentOpen();
    }
});

Collectives™ on Stack Overflow

TypeError: Object.defineProperty called on non-object JQUERY

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related