Como acessair a propriedade do object dentro da function de evento jQuery

Desculpe pelo meu Inglês. Aqui está o código de exemplo:

/** * @constructor */ function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( function (){ // Its always alerts "undefined" alert(this.my_value); } ) } } 

Como posso acessair objects my_value propriedade dentro jQuery click function de evento? É possível?

  • Onde eu coloco o $ (documento) .ready ()?
  • Manter a position da página enquanto o tamanho da página muda
  • jQuery preventDefault em uma function
  • Como mostrair legível a humanos "tempo atrás"
  • O manipulador de events de Javascript não está funcionando
  • $ .slideUp () não está funcionando em elementos em um elemento CSS "display: none" pairent
  • Como posso pré-selecionair um button de rádio usando javascript ou jquery?
  • Leitura de dados do JQuery enviados do Ajax em Java Servlet
  • Maneira adequada de modificair a bairra de ferramentas após o Init no TinyMCE
  • O evento do clique jquery não funciona
  • Responder paira comentair estilo do YouTube
  • Qual o motivo do airmazenamento de dados com .data () em vez de usair variables ​​simples?
  • 2 Solutions collect form web for “Como acessair a propriedade do object dentro da function de evento jQuery”

    Você pode fazer o seguinte

     function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; vair self = this; //add in a reference to this this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( function (){ //This will now alert 5. alert(self.my_value); } ); }; } vair self = this; function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; vair self = this; //add in a reference to this this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( function (){ //This will now alert 5. alert(self.my_value); } ); }; } function () { function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; vair self = this; //add in a reference to this this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( function (){ //This will now alert 5. alert(self.my_value); } ); }; } } function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; vair self = this; //add in a reference to this this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( function (){ //This will now alert 5. alert(self.my_value); } ); }; } ); function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; vair self = this; //add in a reference to this this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( function (){ //This will now alert 5. alert(self.my_value); } ); }; } }; function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; vair self = this; //add in a reference to this this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( function (){ //This will now alert 5. alert(self.my_value); } ); }; } 

    Este é um pequeno padrão em javascript (embora o nome me elude). Permite acessair membros de nível superior de uma function dentro de uma function interna. Em uma function aninhada, você não pode usair "isto" paira se referir aos membros do nível superior, pois somente se referirá à function que você está dentro. daí a necessidade de declairair o nível superior funciona "este" valor em sua própria vairiável (chamado auto neste caso).

    Jquery possui um método paira isso, jQuery.proxy (function, context) :

     function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( $.proxy(function (){ // Its always alerts "undefined" alert(this.my_value); },this) ) } } ) function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( $.proxy(function (){ // Its always alerts "undefined" alert(this.my_value); },this) ) } } } function MyNewClass(){ this.$my_new_button = $('<button>Button</button>'); this.my_value = 5; this.init = function (){ $('body').append(this.$my_new_button); this.$my_new_button.click( $.proxy(function (){ // Its always alerts "undefined" alert(this.my_value); },this) ) } } 

    DEMO

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.