'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 类块中。

这是禁用的代码

$('.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 通常是指父调用对象，根据上下文，它几乎可以是任何东西。

长话短说，尝试像这样在 jQuery 选择器中包装 this：

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

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