jQuery a créé l'élément dom et ajouté l'écouteur d'événement

Question

J'ai un petit problème. J'ai créé un élément dans un objet et cela fonctionne bien. Mais maintenant je veux ajouter des EventListeners pour exécuter une fonction interne à mon objet, le problème est que je ne peux pas exécuter la fonction "setSelection". ("ceci" n'est pas le "ceci" de l'objet, mais le "ceci" de l'événement à l'intérieur de la fonction de clic).

function Object() { 
    this.init = function() { 
     // delete table 
     // ... 
     // set table 
     $('tr').append('<td id="1">test</td>'); 

     $('td').click(function() { 
      // execute setSelection 
     }); 
    } 

    this.setSelection = function(x) { 
     alert('You clicked id ' + x); 
    } 
} 

$(document).ready(function() { 
    x = new Object(); 
    x.init(); 
}); 

Answer 1

Vous pouvez résoudre ce problème en stockant la référence de this dans le champ extérieur à une variable que vous pouvez utiliser dans le gestionnaire d'événements click:

function Object() { 
    var _this = this; 

    this.init = function() { 
     // delete table 
     // ... 
     // set table 
     $('tr').append('<td id="1">test</td>'); 

     $('td').click(function() { 
      _this.doSomething(); 
     }); 
    } 

    this.setSelection = function(x) { 
     alert('You clicked id ' + x); 
    } 
} 

Answer 2

$('td').click((function(e) { 
     // execute setSelection 
     this.setSelection(...); 
    }).bind(this)); 

Answer 3

Mon approche sera:

function Object() { 
    this.init = function() { 
    // delete table 
    // ... 
    // set table 
    $('tr').append('<td id="1">test</td>'); 

    $('td').click(function() { 
     setSelection(this); 
    }); 
    } 

    setSelection = function(x) { 
    alert('You clicked id ' + x); 
    } 
} 

Answer 4

J'ai résolu le problème ...

function Object() { 
    this.init = function() { 
     // delete table 
     // ... 
     // set table 
     $('tr').append('<td id="1">test</td>'); 

     this.setSelection(); 
    } 

    this.setSelection = function() { 
     $('td').click(function() { 
      alert('You clicked id ' + $(this).attr('id')); 
     }); 
    } 
} 

$(document).ready(function() { 
    x = new Object(); 
    x.init(); 
});