Jquery this returns empty object when calling from another function

Question

i have a normal function which works and when i console log this it returns jQuery.fn.init [small.expand, context: small.expand

My function below:

jQuery(document).on('click', 'h3.shipping-name small.expand', function (e) {
    var me = jQuery(this);
    console.log(me);
    var next = me.parent().next().next();
    if (next.is(":hidden")) {
        me.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    } else {
        me.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    }
    next.slideToggle();
});

But if i want to get it from another function like this:

var smallExpand = jQuery('h3.shipping-name small.expand');

smallExpand.on("click", function () {
    expandDetails();
});

function expandDetails(e) {

    alert("oki2");
    var me = jQuery(this);
    console.log(me);
    var next = me.parent().next().next();
    console.log(next)
    if (next.is(":hidden")) {
        me.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    } else {
        me.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    }
    next.slideToggle();
}

But it returns only empy object like this: jQuery.fn.init {} What am i doing wrong?

Problem with your implementation is that this doesn't refers to current element it refers to window. You could do smallExpand.on("click", expandDetails); or expandDetails.call(this); — Satpal
– Satpal, Commented Jan 19, 2018 at 8:07

Satpal · Accepted Answer · 2018-01-19 08:10:20Z

1

Problem with your implementation is that this doesn't refers to current element it refers to window object thus the code doesn't work

You can use call() to set the this value

smallExpand.on("click", function (event) {
    expandDetails.call(this, event);
});

Or, You could just pass the function reference to attach event handler

smallExpand.on("click", expandDetails);

answered Jan 19, 2018 at 8:10

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

Cesar Bielich · Accepted Answer · 2018-01-19 08:10:26Z

0

Set the variable first out side your functions, then you can retrieve it for later.

var me;

Then

function first() {
    me = $(this);
}

Now you can use the variable in another function

function thisorthat() {
    $(‘.class’).val(me);
}

answered Jan 19, 2018 at 8:10

Cesar Bielich

4,96510 gold badges42 silver badges90 bronze badges

Comments

Brian H. · Accepted Answer · 2018-01-19 08:11:07Z

0

You are calling expandDetails as a static method.

as mentioned by @Satpal, you should just do smallExpand.on("click", expandDetails);.

this exists in the smallExpand.on("click", function() {}); scope, but once you call expandDetails(); it gets lost.

answered Jan 19, 2018 at 8:11

Brian H.

8448 silver badges17 bronze badges

Collectives™ on Stack Overflow

Jquery this returns empty object when calling from another function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related