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 ?

Answer 1

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
        });
    };

Answer 2

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
    });
};