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

不推荐使用

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); });属性直接检查所选文件。在这种情况下，您甚至不需要{{1}}事件：

{{1}}

Answer 2

您的代码将按照您的编写方式运行：

//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

所有这一切只发生在＆＃34; click＆＃34;事件火灾

我认为这是你要完成的目标：

＆＃13;

var fileSelected = 0;

$(document.body).on("click", "#discussion_submit_button", 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");
        // 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 {
        console.log("#files:", fileSelected); // this is giving a result of 0
    }
});

$(document.body).on("change", "#discussion_file_upload", function(){ 
    fileSelected = 1;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 -->
                <option value="2">Another option</option>
                <?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>

＆＃13;

更改文件无效？

2 个答案: