Javascript 更改文件不起作用？

我正在制作一个表单，用户可以在其中提交帖子。这篇文章需要用户输入，如标题、主题和正文，而不需要用户输入，如链接和浏览文件来提交图片。我正在使用jQuery和Ajax提交表单。问题是（'change'，function（）{}）上的

.on在
函数中不起作用。单击（）
函数。我无法确定问题所在，但是我单独测试了每个jQuery函数，它们单独工作得很好，但是当一个函数嵌套在另一个函数中时，它就不工作了

以下是jQuery代码：

$(document.body).delegate("#discussion_submit_button", "click", function(){ 
    var title = $("#discussion_title").val();
    var link = $("#discussion_link").val();
    var subjects = $("#discussion_subjects").val();
    var discussion = $("#discussion_input_textarea").val();
    var fileSelected = 0;

    if (title == '' || subjects == '' || discussion == '') { 
        $(".discussion_label_arrow, .discussion_required_fields").fadeIn("Slow");
        // error message, we select span tag with ID error_message and we change its content to this text
        setTimeout(function(){
            $('.discussion_label_arrow, .discussion_required_fields').fadeOut("Slow");
        }, 2000); 
    } else {
        $(document.body).delegate("#discussion_file_upload", "change", function(){ 
        //$('#discussion_file_upload').on('change', function(){
            fileSelected = 1;

        });
        alert(fileSelected); // this is giving a result of 0
    }
});

以下是HTML格式：

<form method="post" action="" class="discussion_form" id="discussion_form">
    <div class="discussion_label_div"><span class="discussion_label_span">Title</span><span class="discussion_label_arrow"><span></div>
    <div class="discussion_input_div"><input type="text" name="discussion_title" class="discussion_input" size="50" id="discussion_title"/></div>
    <div class="discussion_label_div">Link (optional)</div>
    <div class="discussion_input_div"><input type="text" name="discussion_link" class="discussion_input" size="50" id="discussion_link"/></div>
    <div class="discussion_label_div">Image (optional)</div>
    <div class="discussion_input_div"><label for="discussion_file_upload"><span class="imageUploadIcon"></span><span id="imageUploadWord">SELECT FILE TO UPLOAD</span></label><input type="file" name="discussion_image" class="discussion_file_input" id="discussion_file_upload"/></div>
    <div class="discussion_label_div"><span class="discussion_label_span">Subject</span><span class="discussion_label_arrow"><span></div>
    <div class="discussion_input_div">
        <select name="discussions_subjects" id="discussion_subjects">
            <option disabled selected>Select a subject</option> <!-- disabled prevent the user from selecting this option and selected makes it selected at the start -->
            <?php
                $subjects = array('Advice', 'Animals', 'Art', 'DIY', 'Engineering', 'Entertainment', 'Fashion', 'Food', 'Funny', 'Gaming', 'General', 'Health', 
                'Memes', 'Movies', 'Music', 'News', 'Outdoors', 'Philosophy', 'Photography', 'Politics', 'Relationships', 'Religion', 'Science', 'Sports', 'Tourism', 'TV', 
                'Video Games', 'Writing');
                foreach ($subjects as $subject){
                ?>
            <option value="<?php echo $subject;?>">
                <?php echo $subject; ?>
            </option>
            <?php

                }
            ?>                  
        </select>
    </div>
    <div class="discussion_label_div"><span class="discussion_label_span">Discussion</span><span class="discussion_label_arrow"><span></div>
    <textarea rows="5" cols="50" name="discussion_textarea" class="discussion_input_textarea" placeholder="Open your discussion..." id="discussion_input_textarea"></textarea>
    <input type="button" name="discussion_submit_button" value="Assert" class="share_button" id="discussion_submit_button"/>
</form>


标题
链接（可选）
图像（可选）
选择要上载的文件
主题
选择一个主题
您的代码将按照您编写的方式运行：

//This code attaches the event handler but does not call it
$(document.body).delegate("#discussion_file_upload", "change", function(){ 
    // The code in this block doesn't fire until a "change" event comes in
    fileSelected = 1;
});
// This alert happens right after the handler is attached, but before it fired.
alert(fileSelected); // therefore it is giving a result of 0

而所有这些只有在触发“
单击
”事件之后才会发生

我认为这就是你的目标：


var fileSelected=0；
$（document.body）。在（“单击”、“#讨论_提交_按钮”上，函数（）{
var title=$（“#讨论_title”）.val（）；
var link=$（“#讨论_链接”）.val（）；
var主题=$（“#讨论主题”）.val（）；
var discussion=$（“#discussion_input_textarea”）.val（）；
如果（标题=“”| |主题=“”| |讨论=“”）{
$（“.discussion\u label\u arrow，.discussion\u required\u fields”）.fadeIn（“慢”）；
//错误消息，我们选择ID为error_消息的span标记，并将其内容更改为此文本
setTimeout（函数（）{
$（'.discussion\u label\u arrow，.discussion\u required\u fields'）。淡出（“慢”）；
}, 2000); 
}否则{
console.log（“#files:”，fileSelected）；//这给出的结果是0
}
});
$（document.body）.on（“更改”、“#讨论_文件_上传”，function（）{
所选文件=1；
});

标题
链接（可选）
图像（可选）
选择要上载的文件
主题
选择一个主题
另一种选择
delegate（）
已弃用，请改用
on（）
。将
放在（“更改”）
中
放在（“单击”）
中没有任何意义。将其移出：

var fileSelected = 0;
$('#discussion_file_upload').on("change", function(){
    fileSelected = 1;
});

$("#discussion_submit_button").on("click", function(){ 
    //...your code
    alert(fileSelected);
});

但是，您实际上并不需要
fileSelected
变量，您可以使用
files
属性直接检查所选文件。在这种情况下，您甚至不需要“更改”（“change”）
事件：

$("#discussion_submit_button").on("click", function(){ 
    //...your code
    alert($('#discussion_file_upload').files.length);
});

当然，它会提醒0。
change
eventListener将等待某个更改以运行函数中的代码。警告在不推荐使用
delegate（）
之前发出，请改用
on（）
。将
放在（'change'）
中
放在（'click'）
中没有意义。把它搬到外面去。警报在触发事件之前立即执行，因此将其移动到（'change'）
上的
中。我更改文件，然后单击submit按钮，使其发出0警报，但它应该更改，因为该值变为1否，不应该更改。更改文件时，不会附加任何事件。只能在单击后附加它。因此，事件中的代码不会执行。按照我上面的评论进行操作。@RacilHilan我不想实际发出警报，但这是为了调试，所以您建议我将更改放在外部，如果发生更改，则会更改fileSelected变量？如果未选中，表单将提交所需的输入？是的，情况是这样的，但警报返回的值是0，而不是1://@firashelou，对，就像我的代码所说的那样。如果希望它返回1，则需要像我在示例代码段中所做的那样。