'this'指的是jQuery on（）中动态生成的错误元素

Question

As part of a dynamic form I have a checkbox field that enables and disables the next input field (they are a pair, so when you add a new section to the form, the checkbox and the input field are both added together).

.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

and it's all in a .form class block.

Here is the code that does the disabling

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

If I add a few of these form elements, then click on the text "text describing foo_bool_field", it enables/disables the input form of the first set only. If I throw a debugger above the form disabling code and check this , the this always returns the first set. If I click the actually text box □, it works properly, disabling the check boxes and referring to the right this of the checkbox that I actually clicked on.

Any ideas? I've tried a few different things ( click instead of change , etc), but it all comes back to the fact that when clicking on the text, this is not the element i clicked on, and I can't seem to get past that.

Answer 1

Unlike most languages, this in javascript usually refers to the parent calling object, which can be almost anything depending on the context.

Long story shory, try wrapping this in the jQuery selector like so:

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

Basically, $(this) will refer to the DOM element which triggered the callback event (ie change ), and will work for click or any other event trigger.