javascript - 更改文件不起作用？

Question

我正在制作一个用户可以在其中提交帖子的表单。这篇文章需要用户输入(如标题、主题和正文)，而不需要用户输入(如链接和浏览文件)来提交图片。我正在使用 jQuery 和 Ajax 来提交表单。问题是 .on('change', function(){}); 在 .click() 函数内不起作用。我无法识别问题，不过我单独测试了每个 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>

Answer 1

delegate() 已弃用，请使用 on() 代替。将 on("change") 放在 on("click") 内是没有意义的。将其移到外面:

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

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

但是，您实际上并不需要 fileSelected 变量，您可以直接使用 files 属性检查选定的文件。在这种情况下，您甚至完全不需要 on("change") 事件:

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