CODEWITHSUNDEEP
jquerytypescript
Mohammad Hossein Amri
Mohammad Hossein Amri

Reputation: 1995

using the $(this) in event handler with typescript

I saw many answers in the stackoverflow that were answered wrong and I wanted to make it clear at least for myself. the old question: using the $(this) in event handler with typescript. most of the answer was about using event.target

The first problem is it's not only the event.target (most of the answer in stack overflow). I need to check for IE specific terms too (anyone that remember days before jquery at least knows that).

the second problem is propagation. let say I have some elements like this 

<a href="#"><i class="fa fa-open"><span>something is here</span></i></a>

and i created a click event on a like this:

$("a").click((evt)=>{
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    console.log($(target));
});

if there is enough padding and margin around this elements with proper clicking i can get the target as either of three elements a, i, span

now the headache will start, then I need to check what it clicked, is it the a or the span or even the i

time to time it bring redundant codes that was not needed if i could access to $(this). the beauty of $(this) is that it is returning the item that I was listening to, cross browser!

in my case $(this) always reference to a and not any of the other child element. so i know for example if I want to access the i i need to search in child elements. but in the way that Typescript make me to use event i need to check where in the DOM i am (target is span or a or i !!!), then I decide to climb or get down in the tree or do the changes in the current element.

I know there should be a better way. so the question is what is it?

Upvotes: 1

Views: 1224

Answers (2)

Mohammad Hossein Amri
Mohammad Hossein Amri

Reputation: 1995

well the answer was lying on instance methods,

from typescript 0.91 there is a different between normal methods and instance methods and its this. this difference let me to access to both this in class instance and this in jquery.

a sample class would be like this:

class sample{

    field1:number;

    constructor(){
        field1=1;
    }

    method1(){

        let self=this;
        $("a").click(function(event){       
            var target=$(this);  
            console.log(target); // here i have access to the jquery one
            console.log(self.field1); // here i have access to the class level
        });
    }

    method2(){

        $("a").click((event)=>{     
            var target=$(this);  // this will not work bcs it's an instance method 
                                 // the this is refering to the class

            console.log(target); 
        });
    }
}

Upvotes: 1

AlexG
AlexG

Reputation: 4045

I think you want to use event.currentTarget instead of target:

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

ps: Do you really support IE8 ? Google, Microsoft and all don't even support it anymore on most of their websites.

Upvotes: 1

Related Questions