The click event is bubbling, try adding event.stopPropagation()
On Feb 24, 1:07 pm, Chris <macmichae...@gmail.com> wrote:
> Hello so I am trying to create an image that once clicked will trigger
> the file input field but I am getting an error Here is what I am
> doing:
>
> # Set the image in the div
> $("#form_container").css({"background-image": "url(input.png)",
> "width": "126px",
> "height": "150px",
> 'cursor': 'pointer'
>
> });
>
> # set the field input out of viewable site.
> $('input[type=file]').css({'overflow':'none',
> 'position': 'relative',
> 'opacity': '0',
> 'top':'-1000px', // place element of
> the grid
> '-moz-opacity': '0'
>
> });
>
> # When the div container is clicked, trigger the default file input
> field action.
> $("#form_container").click(function() {
> $("#id_content").trigger('click');
>
> });
>
> HTML:
> <div id="form_container">
> <input id="id_content" type="file" />
> </div>
>
> Here is the error that I receive when clicking:
>
> Firebug's log limit has been reached. %S entries not shown.
> Preferences
> too much recursion
> [Break on this error] (function(){var R=/((?:\((?:\([^()]+\)|[...
> (J,typeof K==="string"?K:K+"px")}})})();
> jquery-1....2.min.js (line 19)
> too much recursion
> [Break on this error] var msg = "Error in hook: "+ exc +" fn=\n"+fn
> +"\n stack=\n";
>
> Any thoughts?
>
> Thanks!
