click事件内的jQuery .on('change')方法失效问题排查

你遇到的问题核心在于事件绑定的时机完全错误。你把#discussion_file_upload的change事件绑定放在了提交按钮的click事件内部，这会导致两个致命问题：

1. 只有用户点击提交按钮后，代码才会开始监听文件上传的变化——但这时候用户要么已经选过文件（事件早就触发过了，绑定太晚没接住），要么还没选文件（但你绑定后立刻就执行alert(fileSelected)，用户根本没机会操作文件选择），所以fileSelected永远是初始值0。
2. 重复点击提交按钮会重复绑定change事件，导致后续文件选择时触发多次逻辑，埋下隐患。

单独测试每个函数正常是因为：单独测change事件时，它是提前绑定好的，用户选文件时能及时触发；单独测click事件时，内部逻辑也能执行，但嵌套后时机完全错位了。

修正后的代码方案 #

我们需要把文件上传的监听事件提前，放在页面加载完成后就绑定，这样用户选择文件时fileSelected会及时更新，点击提交时就能拿到正确的值。同时替换已废弃的delegate()方法为官方推荐的on()：

修正后的jQuery代码 #

$(document).ready(function() {
    // 把fileSelected提升为全局（相对于事件回调）的变量
    var fileSelected = 0;

    // 提前绑定文件上传的change事件，页面加载完成就生效
    $("#discussion_file_upload").on('change', function(){
        // 优化：根据是否真的选中文件来更新值，支持用户取消选择的情况
        fileSelected = this.files.length > 0 ? 1 : 0;
        console.log("文件选择状态更新：", fileSelected);
    });

    // 提交按钮的点击事件
    $("#discussion_submit_button").on("click", function(){ 
        var title = $("#discussion_title").val(); 
        var link = $("#discussion_link").val(); 
        var subjects = $("#discussion_subjects").val(); 
        var discussion = $("#discussion_input_textarea").val(); 

        if (title == '' || subjects == '' || discussion == '') { 
            $(".discussion_label_arrow, .discussion_required_fields").fadeIn("slow"); 
            setTimeout(function(){ 
                $('.discussion_label_arrow, .discussion_required_fields').fadeOut("slow"); 
            }, 2000); 
        } else { 
            // 现在这里能拿到正确的fileSelected值了
            alert(fileSelected); 

            // 补充：如果要实现带文件的Ajax提交，需要用FormData
            var formData = new FormData($("#discussion_form")[0]);
            $.ajax({
                url: "你的表单提交接口地址",
                type: "POST",
                data: formData,
                processData: false, // 必须：禁止jQuery处理FormData
                contentType: false, // 必须：让浏览器自动设置正确的Content-Type
                success: function(res) {
                    console.log("提交成功：", res);
                    // 提交成功后的逻辑，比如重置表单、提示用户等
                },
                error: function(xhr, err) {
                    console.error("提交失败：", err);
                }
            });
        } 
    });
});

额外优化点 #

• 用$(document).ready()确保DOM完全加载后再绑定事件，避免元素未渲染导致绑定失效
• 废弃的delegate()方法替换为on()，这是jQuery 3.0+官方推荐的事件绑定方式
• 优化fileSelected的更新逻辑，支持用户选中文件后又取消的场景
• 补充了带文件上传的Ajax提交代码（这是你实现表单提交的核心部分）

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