jQuery .click（）函数在ajax调用中不起作用

Question

I have the following form with a file input which needs to be activated depending on the result of an Ajax Call.

<form id="checkin_form" enctype="multipart/form-data" method="post" style="visibility:hidden;">
    <input type="file" name="file[]" id="checkinfile"><br>
</form>

The javascript function which will trigger the click funtion is:

function clickCheckInFile() 
{
    var file_index = selected_file.id;
    var file_name = $(selected_file).children('td:nth(1)').text();

    $.ajax({
        url: "scripts/check_file.php",
        type: "POST",
        dataType:'json',
        data: {file_index: file_index, file_name: file_name},
        success: function(data){
        if (data['response'] == 200)
        {
            if (data['type'] != "dir")
            {
                if (data['checked_out'] == 1 || data['checked_out'] == "1")
                {
                    if (data['checked_out_by'] == username)
                    {
                        if (data['user_permissions'][1] == 1)
                        {
                            $('#checkinfile').click(); 
                        }
                        else
                        {
                            alert('Access Denied.');
                        }
                    }
                    else
                    {
                        alert('Access Denied');
                    }
                }
                else
                {
                    alert('File is not checked out.');
                }
            }
            else
            {
                alert('Cannot check out a folder');
            }
        }
        else if (data['response'] == 300)
        {
            alert(data['message']);
        }
        else
        {
            handleAjaxResponse(data['response']);
        }
    }});
}

The line not working is the $('#checkinfile').click(); portion. I can put an alert message that triggers in that spot so the code is calling that line. When I move the click to prior to the ajax call it works fine.

Answer 1

It seems you're trying to force a click event. the .click() says what to do when it's clicked - it doesn't trigger a click.

Use .trigger() for that:

$('#checkinfile').trigger('click');

Then you need to separately add what to do when it's clicked like this:

 $('#checkinfile').click(function(){
//do things here
});

As for the issue with the file browser . Try this solution from this article :

Position the input as position:absolute and top:*number that will remove it from viewport* and it'll work

Here's the docs for .trigger()

Answer 2

Though it's generally preferred to use .trigger() instead when triggering an event (if for no other reason than clarity), this line of code seems to work fine:

$('#checkinfile').click();

(assuming that the selector finds the element(s) you expect, of course)

However, the real question is... What do you expect this element to do when the click event is triggered? According to the code posted, there is no event handler for that.

It's a file input, so maybe you expect it to open the file dialog for the user? While it's possible that some browsers may do that, I suspect it's not standard or expected behavior. The file input is notorious for things like this (events, styling, etc.) and can be a bit of a pain at times.

What I suspect is happening is that the browser, potentially for security reasons, is requiring actual user interaction before invoking the file dialog. Again, this behavior may be browser specific, but take a look at a couple of examples here:

• Unable to invoke file dialog automatically
• Able to invoke file dialog from code after manual button click
• Unable to invoke file dialog, using manual button with automatic click

The pattern seems to be that manual interaction is required to open the file dialog, even if it's opened from code.

Answer 3

Check this out:

 $('#clickme').click(function() { $('#checkinfile').click(); }); $(document).on('change', '#checkinfile', function() { alert($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form enctype="multipart/form-data" id="checkin_form" style="visibility:hidden;"> <input type="file" name="file" id="checkinfile"> </form> <button id="clickme">click</button> 

Answer 4

Its easy

$( "example" ).on( "click", function() {
    alert( "click" );
});

You can see documentation here: http://api.jquery.com/on/

Hope it helps you