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

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"]');

• javascript
• jquery

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

2 Answers 2

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() {
   // ...
  });
});

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