Variable Scope: this.remove ist keine Funktion

Question

this.remove() ist keine Funktion. Woher?

var vehicle = function() { 
    return { 
     init: function() { 
      jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) { 
       e.preventDefault(); 
       this.remove(); 
      }); 
     }, 
     remove: function() { 
      alert('test'); 
     } 
    } 
}(); 

jQuery().ready(vehicle.init); 

Sorry für die Verwirrung. Ich versuche meine eigene "remove" Funktion zu nennen. Dies ist einfach eine Klasse, um Fahrzeuge auf meiner Seite zu verwalten. Dies ist der Anfang davon und es wird viel mehr Funktionen haben als nur init/remove.

Answer 1

Da Sie sagten, Sie versuchen, Ihre eigene remove Funktion aufzurufen, ist hier, wie es geht:

var vehicle = (function() { 
    return { 
     init: function() { 
      var that = this; // step one 
      jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) { 
       e.preventDefault(); 
       that.remove(); 
      }); 
     }, 
     remove: function() { 
      alert('test'); 
     } 
    } 
}()); // step zero - wrap the immediate invocation in parens 

jQuery(function() { 
    vehicle.init(); // step two 
); 

Answer 2

this ist ein DOM-Element. Um die .remove() Methode von jQuery zu verwenden, müssen Sie sie in ein jQuery-Objekt einfügen.

$(this).remove(); 

EDIT: Wenn Sie die remove() Funktion im vehicle Objekt aufgerufen hatten gehofft, dann rufen:

vehicle.remove(); 

---

Auch, wenn Sie Ihren .ready() Anruf zu verkürzen haben gehofft, Sie können dies tun:

jQuery(vehicle.init); 

Von der jQuery 1.4 release notes:

Die jQuery().ready() Technik funktioniert immer noch in 1.4, aber es ist veraltet. Bitte verwenden Sie entweder jQuery(document).ready() oder jQuery(function(){}).

Answer 3

var vehicle = function() { 
    return { 
     init: function() { 
      var self = this; 
      jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) { 
       e.preventDefault(); 
       self.remove(); 
      }); 
     }, 
     remove: function() { 
      alert('test'); 
     } 
    } 
}(); 

jQuery().ready(function() { 
    vehicle.init(); 
}); 

Answer 4

Hinweis - wir sind alle etwas verwirrt, weil nicht klar ist, welche „entfernen“ Funktion, die Sie aufrufen möchten.

Das Problem ist, dass Sie den Verweis auf die "init" -Funktion übergeben, aber wenn es aufgerufen wird, bezieht sich die "diese" Variable auf das Fensterobjekt, nicht den Wert von "Fahrzeug". Warum? Denn in Javascript hängt der Wert "this" nur davon ab, wie eine Funktion aufgerufen wird. Die Tatsache, dass zwei Funktionen im selben Objekt definiert sind, hat damit absolut nichts zu tun.

Versuchen Sie stattdessen tun:

jQuery(function() { 
    vehicle.init(); 
}); 

Wenn Sie die „init“ Funktion aufrufen, die Art und Weise — durch explizit als eine Eigenschaft des „Fahrzeug“ Referenzierung Objekt — dann wird Javascript binden „dieses“ die Wert von "Fahrzeug".

bearbeiten oh warten Ich habe gerade bemerkt, dass Sie auch gehen zu müssen, Ihre „init“ Funktion zu überarbeiten, denn das Code in das „Klick“ Handler von jQuery genannt werden wird in einer solchen Art und Weise um "dieses" in diesem Kontext an das betroffene Element zu binden. Also, wenn Sie die "Fahrzeug" -Referenz herum behalten möchten, würden Sie das tun:

init: function() { 
     var originalThis = this; 
     jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) { 
      e.preventDefault(); 
      originalThis.remove(); 
     }); 
    }, 

Answer 5

Vielleicht suchen Sie etwas wie das?

var vehicle = new function() { 

    var self = this; 

    this.init = function() { 
    jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) { 
     e.preventDefault(); 
     self.remove(); 
    }); 
    }; 

    this.remove = function() { 
    alert('test'); 
    }; 

}; 

... oder vielleicht? Es ist schwer zu sagen, wofür du hingehst ...

var vehicle = new function() { 

    function remove() { 
    alert('test'); 
    } 

    this.init = function() { 
    jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) { 
     e.preventDefault(); 
     remove.call(this); 
    }); 
    }; 

}; 

Answer 6

Wenn eine Funktion als Methode Aufruf „dieses“ verweist auf das Objekt, das ist es aufrufen. In jQuery wird die übergebene Funktion als eine Methode des html-Elements aufgerufen, so dass "this" zum Element wird.

Um sicherzustellen, dass Sie auf das korrekte Objekt verweisen, müssen Sie einen Verweis auf das ursprüngliche Objekt erstellen.

var vehicle = function() { 
     var that = { 
     init: function() { 
      jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) { 
       e.preventDefault(); 
       that.remove(); 
      }); 
     }, 
     remove: function() { 
      alert('test'); 
     } 
    } 
    return that; 
    }(); 

jQuery().ready(vehicle.init);