call a class method inside a function

Question

In my component, I have one method in which I am attaching a jquery event binding.

jqueryNextDataEditableShow() {
    $('#symbolTable .editable').on('hidden', function (e, reason) {
      if (reason === 'save' || reason === 'nochange') {
        var $next = $(this).closest('td').next().find('.editable');
        if($next != undefined && $next.length == 0){
          //call that method
        }
        setTimeout(function () {
          $next.editable('show');
        }, 300);
      }
    });
  }

I have another method in the class, onSimulate().

onSimulate(){
   console.log("onSimulate Method Called");
}

I want to call it inside the jqueryNextDataEditableShow() where I put the comment mark. Problem I'm facing is, inside the function this keyword will point to the document tag or element.

Couple of suggestions here: [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/218196) — Felix Kling, May 31 '18 at 07:37

Pardeep Jain · Answer 1 · 2018-05-31T07:29:06.703

0

Use arrow function => instead like this -

jqueryNextDataEditableShow() {
    $('#symbolTable .editable').on('hidden',  (e, reason) => {
      if (reason === 'save' || reason === 'nochange') {
        var $next = $(this).closest('td').next().find('.editable');
        if($next != undefined && $next.length == 0){
          //call that method
        }
        setTimeout(() => {
          $next.editable('show');
        }, 300);
      }
    });
  }

For more into arrow function read here -

https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

edited May 31 '18 at 07:29

answered May 31 '18 at 07:27

Pardeep Jain

84,110
37
165
215

2

Then, `$(this).closest('td')` won't work, right? – CertainPerformance May 31 '18 at 07:28
Not sure, but this should work IMO – Pardeep Jain May 31 '18 at 07:30
1

If you use an arrow function, the `this` will be inherited from the parent scope, so `$(this)` won't work - you'll solve one problem at the expense of creating another. You should select the element explicitly. – CertainPerformance May 31 '18 at 07:31
`this will be inherited from the parent scope` Yes you are right, Thank you for pointing it out !! Can you please update my answer with your solution or add new answer – Pardeep Jain May 31 '18 at 07:33
I'm not sure about the `hidden` event (can't find it in cursory searching), but it might be that `e.target` references the element that gets hidden. `$next = $(e.target).closest(...` might work – CertainPerformance May 31 '18 at 07:35
@YashJain can you please try this code – Pardeep Jain May 31 '18 at 07:36

call a class method inside a function

1 Answers1