'这'引用了jQuery on(）中错误的动态生成元素

'this' refers to wrong dynamically generated element in jQuery on()

本文关键字：错误 动态 元素 引用 jQuery on      更新时间：2023-09-26

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

.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

并且都在CCD_ 1类块中。

这是执行禁用的代码

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

如果我添加一些这样的表单元素，然后单击文本"text-descriptingfoo_bool_field"，它只启用/禁用第一个集合的输入表单。如果我在表单禁用代码上方抛出调试器并检查this，那么this总是返回第一个集合。如果我单击实际文本框□,它工作正常，禁用复选框并引用我实际点击的复选框的右侧this

有什么想法吗？我尝试了一些不同的东西（click而不是change等），但这一切都回到了一个事实，即当点击文本时，this不是我点击的元素，我似乎无法克服这一点。

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

长话短说，试着在jQuery选择器中包装this，如下所示：

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

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

相关文章：