AjaxUpload: why have to click twice?

AjaxUpload: why have to click twice?

Hi all,

The code below  uploads files to the server using AjaxUpload.2.0.min.js

But you need to click several times on the “Add File” button for the OS window (where to pick the file you want to upload) to show, instead of clicking just once.

Also,  if you click once in the link and then you move the mouse out of the red area and click (out of #upload_files), and  last you click back in the link, it works, the OS window opens .. but why do I have to do this? Is that AjaxUpload will not be initially bound in the .livequery call? then, how do I bound it?  

The .js are uploaded into github to make the code easy to test, but in the real case they are in my machine.

Thanks a lot












  1. <head>
  2. <style>
  3. #upload_files{color: #fff; background:#F32201; border:1px solid #7E9DB9; padding:2px;}
  4. </style>

  5. <script type="text/javascript" src="https://gist.github.com/raw/6dd585079502f138d87e/7c243080233761859937d52195b670602731a379/jquery-1.4.2.min.js"></script>

  6. <script type="text/javascript" src="https://gist.github.com/raw/eeb2fe78f63ab80b626d/5be66e749b19fbb5b7c8814bf72a98c083f2aaaf/jquery.livequery.min.js"></script>

  7. <script type="text/javascript" src="https://gist.github.com/raw/826bff2445c8533dd7fc/797734455959ef27796b6770c95a7b39049ae6e9/AjaxUpload.2.0.min.js"></script>

  8. <script type="text/javascript">
  9. $(document).ready(function() {
  10. function uploadFiles(){
  11. new AjaxUpload('#upload_files', {
  12. action: 'whereToUploadInServer.php',
  13. });

  14. }//end uploadFiles

  15. $("#upload_files").livequery("click", function(e){
  16. e.preventDefault();
  17. uploadFiles();
  18. //debugger ;
  19. });
  20. }); //end document ready
  21. </script>


  22. </head>
  23. <body>
  24. <div><a href="#" id="upload_files">Add File</a></div> <br>