I have a parent div
which contains an input
element, and every time the parent div
is clicked, it returns false
.
<div class="media-asset"> <input type="file" name="picture-label" > </div>
$('body').on({ click:function(){ return false; } },'.media-asset');
The problem is when the parent div
returns false
, the default action of a file input
is gone, and it won’t prompt the user to upload a file. Is it possible to manually trigger the default action of a file input?
$('body').on({ click:function(){ //manually trigger the file input return false; } },'.media-asset input');
The reason I let the parent div
to return false is when the user click outside of the parent div
, it would hide the parent div
, and while the user click inside of the parent div
, it would not hide itself.
Advertisement
Answer
No need to manually trigger it. Specify event.stopPropagation()
on the '.media-asset input'
click event and remove the return false
from that as well:
event.stopPropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$('body').on({ click:function(){ return false; } },'.media-asset'); $('body').on({ click:function(event){ event.stopPropagation(); } },'.media-asset input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="media-asset"> <input type="file" name="picture-label" > </div>