页面首次加载时如何触发指定jQuery函数以初始化表单状态？

问题场景 #

我有一个包含多种输入项的表单，编写了两个交互函数：

• handle_select_change：根据select字段的值显示/隐藏textarea
• slug_and_hide：根据文本输入框内容自动生成slug

当前代码仅在用户手动触发（键盘输入、下拉选择）时生效，但页面首次加载时：

1. textarea默认全部显示，不会根据select的初始值自动隐藏
2. 文本输入框的slug不会自动生成

原交互代码如下：

jQuery( document ).ready( function( $ ) {
   jQuery('.cx-ui-container input[type="text"]').on('keyup', function(e){
     slug_and_hide(jQuery(this));
   })

  jQuery('.cx-ui-container select').on('change', function(e){
      handle_select_change(jQuery(this));
   })
})

function handle_select_change(obj) {
    var selectField = jQuery(obj);
    var selectedValue = selectField.val();
    var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');

    if (selectedValue !== "multiple-choice") {
        textareaField.css("display", "none");
    } else {
        textareaField.val(""); 
        textareaField.css("display", "block");
    }   
}

function slug_and_hide(obj){
    var inputField = jQuery(obj).val();
    
    // 转小写并将空格替换为连字符
    let slug = inputField.toLowerCase().replace(/\s+/g, '-');
    // 移除特殊字符（仅保留字母、数字和连字符）
    slug = slug.replace(/[^a-z0-9-]/g, '');
    // 移除首尾连字符
    slug = slug.replace(/^-+|-+$/g, '');

    let inputSlug = jQuery(obj).parents('.cheryr-ui-repeater-content-box').find('.input-slug-wrap').find('input');
    inputSlug.prop('readonly', true);
    inputSlug.val(slug);
    inputSlug.css("display", "block");
}

解决方案 #

只需在页面DOM就绪后，手动遍历所有目标元素并调用对应函数，即可完成初始化：

1. 初始化select控件：遍历所有.cx-ui-container select元素，逐个调用handle_select_change
2. 初始化文本输入框：遍历所有.cx-ui-container input[type="text"]元素，逐个调用slug_and_hide

修改后的完整代码：

jQuery( document ).ready( function( $ ) {
   // 绑定键盘输入事件
   jQuery('.cx-ui-container input[type="text"]').on('keyup', function(e){
     slug_and_hide(jQuery(this));
   });

   // 绑定下拉选择事件
   jQuery('.cx-ui-container select').on('change', function(e){
      handle_select_change(jQuery(this));
   });

   // 页面加载时初始化文本输入框的slug
   jQuery('.cx-ui-container input[type="text"]').each(function() {
       slug_and_hide(jQuery(this));
   });

   // 页面加载时初始化select对应的textarea显示状态
   jQuery('.cx-ui-container select').each(function() {
       handle_select_change(jQuery(this));
   });
});

function handle_select_change(obj) {
    var selectField = jQuery(obj);
    var selectedValue = selectField.val();
    var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');

    if (selectedValue !== "multiple-choice") {
        textareaField.css("display", "none");
    } else {
        textareaField.val(""); 
        textareaField.css("display", "block");
    }   
}

function slug_and_hide(obj){
    var inputField = jQuery(obj).val();
    
    // 转小写并将空格替换为连字符
    let slug = inputField.toLowerCase().replace(/\s+/g, '-');
    // 移除特殊字符（仅保留字母、数字和连字符）
    slug = slug.replace(/[^a-z0-9-]/g, '');
    // 移除首尾连字符
    slug = slug.replace(/^-+|-+$/g, '');

    let inputSlug = jQuery(obj).parents('.cheryr-ui-repeater-content-box').find('.input-slug-wrap').find('input');
    inputSlug.prop('readonly', true);
    inputSlug.val(slug);
    inputSlug.css("display", "block");
}

说明 #

• 使用each()方法遍历所有目标元素，确保每个控件都能触发初始化逻辑
• 初始化代码放在事件绑定之后，保证逻辑顺序正确
• 原函数无需修改，直接复用即可实现交互与初始化的统一逻辑

内容的提问来源于stack exchange，提问作者tukitooo1998