'this' object is undefined inside callback having parameter, in jquery

Question

I am attaching a callback function to select box on change event like this

select.on('change', config, party.selectOne);

Here config is the parameter I am passing to call back function. Inside call back I could access config parameter.

But my issue is, inside callback, $(this) returns unexpected object other than select box object

party.selectOne= function(config) {
    // is the selectbox
    var selectbox = $(this);
    var api = selectbox.data('api');
}

So I am getting api as undefined . But this will work fine if I don't pass any parameter to call back. What is wrong with me?

Example :

<select data-api="{'name':'one','address':'address1'}">
    <option>one</option>
    <option>two</option>
</select>

Answer 1

So I am getting api as undefined.

That means that these two things are true:

1. The element the change occurred on (one of the elements in select as of your select.on call) has never had .data('api', something) called on it, and

2. That element doesn't have a data-api attribute on it — or rather, it didn't as of the first time .data was used on it.

Or , it could mean that party.selectOne has been bound at some point in code you haven't shown.

(Remember that data is not an accessor for data-* attributes. It's both more and less than that .)

jQuery's set-based nature can trip you up. If you have multiple elements in select as of your select.on call, and you've only set the api data item (directly via .data , or indirectly through a data-api attribute) on one of them, then a change event on a different one of them may give undefined for .data('api') . jQuery's data cache is per-element, not per-set.

Answer 2

Not this is undefined, but the return value of data() for "api" is.
Use attr() instead of data() :

 // To make this example work var party = {}; var config = { foo: "bar" }; var select = $("select"); // --- party.selectOne = function(config) { var selectbox = $(this); var api = selectbox.attr('data-api'); console.log(api); console.log(config.data.foo); } select.on('change', config, party.selectOne); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select data-api="{'name':'one','address':'address1'}"> <option>one</option> <option>two</option> </select> 

Answer 3

It is resolved. Here config parameter was of type Object. If we pass config parameter as string, it will be resolved. I think, if we pass config as object , $(this) will refer config , instead of referencing select box element