I followed the examples that I found but for some reason clicking on the above div won't trigger a click on the below input. Can someone tell me where I'm going wrong?
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});#uploader {
width: 480px;
height: 100px;
line-height: 100px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
margin-bottom:10px;
}<script src=".1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>I followed the examples that I found but for some reason clicking on the above div won't trigger a click on the below input. Can someone tell me where I'm going wrong?
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});#uploader {
width: 480px;
height: 100px;
line-height: 100px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
margin-bottom:10px;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>- 2 what do you want actually through text input box click. as clicking on text-inputbox will do nothing? – Death-is-the-real-truth Commented Mar 19, 2018 at 7:52
-
1
Are you're trying to upload file? If yes, using
<input type="file">instead – Jyme Commented Mar 19, 2018 at 7:53 - 1 but it works fine :/ – Rahele Dadmand Commented Mar 19, 2018 at 7:54
-
1
If you need to start typing after the click, you can try
.focus()instead – Thum Choon Tat Commented Mar 19, 2018 at 7:58 -
1
Click is actually happening, but there is no click handler in first place to catch that event. Just add
$('#url').click(function(event) { console.log( 'Input element was clicked' ) });and then check console. – palaѕн Commented Mar 19, 2018 at 7:58
6 Answers
Reset to default 3If you need the click to focus on the #url element, use .focus() instead of .click():
$(document).on('click', '#uploader', function(event) {
$("#url").focus();
});#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="file" name="url" id="url" onclick="console.log('clicked!!')">
</body>
</html>I guess you want to open native file browser window on click. Check the snippet, there in an click handler attached to the input too. You can use this for further processing.
I hope on click of div you want to show file upload window.
For that Convert type="text" to type="file" and it will work fine.
Working snippet:-
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="file" name="url" id="url">
</body>
</html>Note:-
Your code is working fine, but there is no click handler written to catch that event. So notting happening
You can assure by adding click handler to your code like below:-
$(document).on('click', '#uploader', function(event) {
$("#url").focus(); // you can apply .click() too
});
/* for click add the even handler like below
$('#url').click(function(){
$(this).val('Hey click worked!').focus();
});
*/#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>Instead of this
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
Use like this
$(document).on('click', '#uploader', function(event) {
$("#url").trigger('click);
});
Are you missing an click event for the #url element?
When triggering a click event for an element using .click() you have to define an actual click event for it.
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
$("#url").click(function(){
alert('asd');
});
This could be the only reason, unless the scripts aren't loaded properly, or you are getting some errors while running your JS.
See: JSFiddle
In case you want the click event to focus on your input element, you'd use .focus(), as described in a previous answer written by Alive to Die.
See: JSFiddle
Click & Focus, just modify few code
$('#uploader').on('click', function(event) {
$("#url").click().focus();
});#uploader {
width: 480px;
height: 100px;
line-height: 150px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<br>
<input type="text" name="url" id="url" onclick="alert('clicked!!')">
</body>
</html>