javascript - “this”指的是 jQuery on() 中错误的动态生成元素

Question

作为动态表单的一部分，我有一个复选框字段，用于启用和禁用下一个输入字段(它们是一对，因此当您向表单添加新部分时，复选框和输入字段都会添加在一起) .

.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

这一切都在 .form 类 block 中。

这是执行禁用操作的代码

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

如果我添加其中一些表单元素，然后单击文本“描述 foo_bool_field 的文本”，它将仅启用/禁用第一组的输入表单。如果我在表单禁用代码上方抛出一个调试器并检查 this，则 this 始终返回第一组。如果我单击实际的文本框□，它会正常工作，禁用复选框并引用我实际单击的复选框的右侧this。

有什么想法吗？我尝试了一些不同的操作(click 而不是 change 等)，但这一切都回到了这样一个事实:当单击文本时，this 不是我点击的元素，我似乎无法超越它。

Answer 1

与大多数语言不同，JavaScript 中的 this 通常指的是父调用对象，根据上下文，它几乎可以是任何东西。

长话短说，尝试将 this 包装在 jQuery 选择器中，如下所示:

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

基本上，$(this) 将引用触发回调事件(即 change)的 DOM 元素，并且适用于 click 或任何其他事件触发器。