How to prevent jquery to override "this"

Question

I have the following class in javascript:

function User(aJid){
    this.jid = aJid;
    this.name = '';
    this.uni = '';
    this.edad = '';
    this.foto = '';
    this.avatar = '';
    this.initialize2 = function(){

        $('#edit_vcards').on('click', '#enviar_vcard', function(){
            //alert("enviando...");
            console.log(this);
        });
    };

As you can see I have a method "initialize2" that binds a function to some elements in the DOM. In there I do a console.log(this) which prints the DOM element we binded the method to and not the object that is executing the method initialize2. How can I have access to that object from that function? Its like if the scope of the function binded is the whole DOM and not the object. Anyway to do what Im trying to do ?

over nine thousand duplicates – Esailija Jun 15 '12 at 15:40 — Esailija, Jun 15 '12 at 15:40

score 10 · Accepted Answer · answered Jun 15 '12 at 15:44

function User(aJid){
    this.jid = aJid;
    this.name = '';
    this.uni = '';
    this.edad = '';
    this.foto = '';
    this.avatar = '';
    this.initialize2 = function(){
    var that = this;  //store a reference to maintain scope

        $('#edit_vcards').on('click', '#enviar_vcard', function(){
            //alert("enviando...");
            console.log(that);  //use that variable here
        });
    };

score 3 · Answer 2 · answered Jun 15 '12 at 15:41

Try passing the obj this to .on and the inside the handler you can use event.data to access the obj this. See below,

this.initialize2 = function(){

    $('#edit_vcards').on('click', '#enviar_vcard', {obj_this: this }, function(){
        //alert("enviando...");
        console.log(event.data.obj_this); //should be the obj this
    });
};

score 0 · Answer 3 · answered Feb 17 '17 at 14:41

0

Pass the outer this through event.data:

$('#edit_vcards').on('click', { outerThis: this }, function (event) {
    console.log(event.data.outerThis);
});

answered Feb 17 '17 at 14:41

Mikael Engver

4,634
4
46
53

score 0 · Answer 4 · answered May 03 '18 at 14:17

Nowadays with ES6 it can be even more elegant

$('#edit_vcards').click( () => {
            //alert("enviando...");
            console.log(this); // all your variables are availabled here
        });

or even like that (if you need only one line):

$('#edit_vcards').click( () => console.log(this) );

NOTE: This code cannot be used directly and should be additionally compiled with balel, for example.

How to prevent jquery to override "this"

4 Answers4

Linked