How to reference element in a jQuery function's callback?

Question

Let's say I have a jQuery function like this:

$.fn.foo = function(param, callback) {
    if (typeof callback === 'function') {
        callback(params);
    }
}

and then when calling the function on an element like:

$('table tr').foo(bar, function(param) {
    console.log($(this)); // this needs to reference 'table tr'
});

In cases like this, I've noticed that this references the window. How would you reference the element that the function is being called on without passing it as an argument inside the callback?

To be honest this seems like a strange approach for a plugin method. What is your specific use case? — charlietfl
– charlietfl, Commented Nov 28, 2019 at 17:31
I wanted to submit the closest form when a table tr is double clicked, or if there's no form, just a button, to be able to specify in callback @charlietfl — Amir Rami
– Amir Rami, Commented Nov 28, 2019 at 17:33
Ok...just need to realize that you won't be able to isolate specific row instances doing it this way since this inside the plugin is jQuery object with all rows in it — charlietfl
– charlietfl, Commented Nov 28, 2019 at 17:35

Rory McCrossan · Accepted Answer · 2019-11-28 17:25:41Z

4

To achieve this you can use call() to set the scope of the function you invoke.

Also note that your $.fn.foo function definition requires two arguments, not one. I used the first one as the classname to apply to the element in this example.

$.fn.foo = function(params, callback) {
  if (typeof callback === 'function') {
    callback.call(this, params);
  }
}

$('table tr').foo('foo', function(classname) {
  $(this).addClass(classname);
});

.foo { color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Foo</td>
  </tr>
</table>

answered Nov 28, 2019 at 17:25

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

How to reference element in a jQuery function's callback?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related