javascript - 当隐藏元素显示在屏幕上时重新运行函数

Question

• 我有一个函数可以检查我的所有表单字段是否已填写 中，如果他们有它会删除我提交上的禁用属性 按钮并允许用户提交。

• 这工作得很好，但是，我有一个字段仅在以下情况下出现: 在页面的下拉列表之一中选择了某个元素， 当这个元素出现时，我添加验证类，如下所示:

  if (job.value === "OTHER") {
      $('#inputOtherJobFunction').parent().show();
      $('#inputOtherJobFunction').addClass('validate');
  } else {
      $('#inputOtherJobFunction').removeClass('validate);
  }
  

然后，我在函数中再次分配 $fieldsToCheck 变量，以便它现在在屏幕上包含新的表单元素。

这个新元素出现在屏幕上后，仅当我单击另一个输入框并键入内容时，禁用的按钮才会变为事件状态。

我想每次在表单上输入任何内容时都需要触发此功能，但我不太确定。

let $registerButton = $('.create-account-button');
let $fieldsToCheck = $('.registration-form .validate');

let checkFields = function () {
    $fieldsToCheck = $('.registration-form .validate');
    console.log('being called');
    let emptyFields = $fieldsToCheck.map(function () {
        return this.value;
    }).get().filter(function (val) {
        return val.length === 0;
    });
    $registerButton.prop('disabled', !!emptyFields.length);
};

$fieldsToCheck.blur(checkFields);
checkFields();

Answer 1

尝试过吗？

if (job.value === "OTHER") {
            $('#inputOtherJobFunction').parent().show();
            $('#inputOtherJobFunction').addClass('validate');

            checkFields();
        } else {
            $('#inputOtherJobFunction').removeClass('validate);
        }

编辑: 通过您的评论了解您的需求，我想说尝试将该方法附加到相关事件。

$fieldsToCheck.on('focus blur change', checkFields);

您的情况可能只需要焦点和模糊