'Dies' bezieht sich auf falsch dynamisch generiertes Element in jQuery on()

Question

Als Teil eines dynamischen Formulars habe ich ein Kontrollkästchenfeld, das das nächste Eingabefeld aktiviert und deaktiviert (sie sind ein Paar, also wenn Sie einen neuen Abschnitt hinzufügen Das Formular, das Kontrollkästchen und das Eingabefeld werden beide zusammengefügt).

.form-element 
    .checkbox 
    = f.label :foo_bool_field do 
     = f.check_box :foo_bool_field, class: 'foo-bool-field-form-toggle' 
     .desc_foo_bool_field= "text describing field" 

    .input 
    = f.label :bar_input_field 
    = f.text_field :bar_input_field, disabled: f.object.foo_bool_field 

und es ist alles in einem .form Klasse Block. Hier

ist der Code, der die Deaktivierung tut

$('.form').on('change', '.foo-bool-field-form-toggle', function(e) { 
    // disabling code goes here 
}); 

Wenn ich ein paar dieser Formularelemente hinzufügen, dann klicken Sie auf den Text „Text beschreibt foo_bool_field“, es aktiviert/deaktiviert die Eingabemaske des ersten nur einstellen. Wenn ich einen Debugger über den Formularsperrcode bringe und this überprüfe, gibt der this immer den ersten Satz zurück. Wenn ich auf das eigentliche Textfeld □ klicke, funktioniert es einwandfrei, deaktiviert die Kontrollkästchen und verweist auf das richtige this des Kontrollkästchens, auf das ich tatsächlich geklickt habe.

Irgendwelche Ideen? Ich habe ein paar verschiedene Dinge versucht (click anstelle von change, etc), aber es kommt alles auf die Tatsache zurück, dass beim Klicken auf den Text, this ist nicht das Element, auf das ich geklickt habe, und ich kann nicht scheinen, vorbei zu kommen Das.

Answer 1

Im Gegensatz zu den meisten Sprachen bezieht sich this in JavaScript normalerweise auf das übergeordnete aufrufende Objekt, das je nach Kontext fast alles sein kann.

Lange Geschichte shory, versuchen this in dem jQuery-Selektor Umwickeln wie so:

$('.form').on('change', '.foo-bool-field-form-toggle', function(e) { 
    // disabling code goes here 
    $(this).whatever 
}); 

Grundsätzlich $(this) auf das DOM-Element beziehen, die das Callback-Ereignis ausgelöst (dh change) und arbeitet für click oder Jeder andere Ereignisauslöser.