Onclick() function doesn't work with JQuery parameter passing

Question

I am having this page:

<html>
    <head>
    </head>
    <body>
        <div id="uploadBox">
            <div id="uploadarea">
                <div id="dragandrophandler">Drag and Drop Files Here</div>      
                    <input style='display:none;' type="file" name="file" id="file" />
                    <span onclick="$('#file').click();">click it</span>
                <div id="status1"></div>
            </div>
        </div>

    <script src="JQueryJS.js"></script>
    <script>

(function (){
...
//closes and passes the jQuery var into immediate function
}(jQuery))
    </script>
    </body>
</html>

This page was existing code written by others. And the onclick event is not working. It keeps on throwing exceptions. But if I remove the (JQuery) at the bottom, it works fine then. So I am just wondering does the (JQuery) actually do anything? I am pretty new to jQuery so I am not sure how this works. I am not seeing it referenced by any other piece of code. Is it safe for me to remove it?

----

(function() {
  ...
  //closes and passes the jQuery var into immediate function
}(jQuery))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="uploadBox">
  <div id="uploadarea">
    <div id="dragandrophandler">Drag and Drop Files Here</div>
    <input style='display:none;' type="file" name="file" id="file" />
    <span onclick="$('#file').click();">click it</span>
    <div id="status1"></div>
  </div>
</div>

is there a reason that you're using js onclick and not writing the .click(function(){}) in the script? also, have a look at this link, it would help a lot => learn.jquery.com/using-jquery-core/document-ready — Amin Jafari
– Amin Jafari, Commented Sep 29, 2014 at 5:44
@AminJafari Yes, .click(function(){} doesn't seem to work for IE8/9. That's why I am switching to javascript version of triggering. — Lance Shi
– Lance Shi, Commented Sep 29, 2014 at 5:46
@LanceShi, Try $('#file').focus() if you want to open the file dialog. — Apul Gupta
– Apul Gupta, Commented Sep 29, 2014 at 5:47
@LanceShi : just to confirm, are those brakets ')' at correct place? when i need to pass something to a self invoking function i use it like this "(function($) { ... })(jQuery);" . — Shivang MIttal
– Shivang MIttal, Commented Sep 29, 2014 at 5:48
that's not possible, it must work in all browsers because it's not CSS related, you must be doing something else wrong! — Amin Jafari
– Amin Jafari, Commented Sep 29, 2014 at 5:48

Nitin Kaushal · Accepted Answer · 2014-09-29 05:48:58Z

3

Change your code

<html>
    <head>
    </head>
    <body>
        <div id="uploadBox">
            <div id="uploadarea">
                <div id="dragandrophandler">Drag and Drop Files Here</div>      
                    <input style='display:none;' type="file" name="file" id="file" />
                    <span id="clickHere"">click it</span>
                <div id="status1"></div>
            </div>
        </div>

<script>
$( "#clickHere" ).click(function() {
  alert( "Handler for .click() called." );
});
</script>

answered Sep 29, 2014 at 5:48

Nitin Kaushal

2111 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nitin Kaushal Over a year ago

you can do this without docuemnt.ready, because on click will work on only click event. Document.ready means, all the function calling in this function will load whr document will ready, That's it's not a hard rule to write click event function to call in ready state function

Trey Over a year ago

it's always a good idea to have a document.ready because you are binding to the elements event handler, if for some reason the element loaded before this script ran it wouldn't work... hence document.ready

Lance Shi Over a year ago

Thank you for your answer, Nitin. But this is actually my original code. It works fine with all other browsers except ie8/9. That's why I am switching to js style triggering.

Nitin Kaushal Over a year ago

Hey Lance, you can use javascript , create function in javascript and call that function on click event of span

Trey · Accepted Answer · 2014-09-29 06:01:56Z

2

If compatibility is your issue have you tried something like this fiddle?

basically what Manu Zi said with:

function clickme(){
    document.getElementById('file').click();
}

Also, if you do want to use your encapsulation for something:

(function (){
...
//closes and passes the jQuery var into immediate function
}(jQuery))

should be

(function (){
...
//closes and passes the jQuery var into immediate function
})(jQuery)

edited Sep 29, 2014 at 6:01

answered Sep 29, 2014 at 5:54

Trey

5,5404 gold badges25 silver badges31 bronze badges

1 Comment

Lance Shi Over a year ago

To me, this is the best answer as it solves my issue. I am still struggling with another issue in this file which is file api doesn't support ie8/9, but it is another story.

Shivang MIttal · Accepted Answer · 2014-09-29 06:02:01Z

2

below code have the braces at wrong place. This is why it is not working with (jquery)

(function() {
  ...
  //closes and passes the jQuery var into immediate function
}(jQuery)) // here it should be passed to self invoking function

It sholud be like this :

(function() {
  ...
  //closes and passes the jQuery var into immediate function
})(jQuery)

answered Sep 29, 2014 at 6:02

Shivang MIttal

1,0011 gold badge17 silver badges38 bronze badges

3 Comments

Lance Shi Over a year ago

Thank you for this answer, Shiv. It works just as I have removed the jQuery. The dialog is opening smoothly, but the file is not uploading. So I guess the parameter is still not passed.

Lance Shi Over a year ago

Sorry I was not noticing that jQuery is actually case sensitive. After I changed it, it works fine with original stuffs - but it still doesn't work for my onclick() event. I will try more though.

Shivang MIttal Over a year ago

@LanceShi: paste the code which you have written for onclick, and upvote if the above anwser helps

Manu Zi · Accepted Answer · 2014-09-29 05:50:20Z

1

You can declare a function something like this:

$(document).ready(function() {
    function fileAction() {
       alert('Hello File');
    };
});

and the html:

<span onclick="fileAction();">click it</span>

and take notice you must style the cursor icon for this span, in other case the user have no visual hint that he can click on this.

answered Sep 29, 2014 at 5:50

Manu Zi

2,3806 gold badges35 silver badges70 bronze badges

Collectives™ on Stack Overflow

Onclick() function doesn't work with JQuery parameter passing

4 Answers 4

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related