Question

我按照我找到的示例进行了操作，但出于某种原因点击上面的div不会触发点击下面的输入。有人能告诉我哪里出错了吗？

＆＃13;

$(document).on('click', '#uploader', function(event) { 
    $("#url").click(); 
});

＆＃13;

#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;
}

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

Answer 1

我希望点击div 你想要显示文件上传窗口。

对于转换type="text"到type="file"，它会正常工作。

工作代码段： -

$(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.com/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>

注意： -

您的代码运行正常，但没有编写用于捕获该事件的单击处理程序。所以没有发生

您可以通过在代码中添加点击处理程序来确保如下： -

$(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.com/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>

Answer 2

如果您需要点击以关注#url元素，请使用.focus()代替.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.com/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>

Answer 3

＆＃13;

$(document).on('click', '#uploader', function(event) { 
    $("#url").click(); 
});

＆＃13;

#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;
}

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

我想你想点击打开原生文件浏览器窗口。检查片段，也可以在输入中附加一个点击处理程序。您可以使用它进行进一步处理。

Answer 4

而不是这个

$(document).on('click', '#uploader', function(event) { 
    $("#url").click(); 
});

像这样使用

$(document).on('click', '#uploader', function(event) { 
    $("#url").trigger('click); 
});

Answer 5

您是否遗漏了 #url 元素的点击事件？

使用 .click（）触发元素的点击事件时，您必须为其定义实际点击事件。

$(document).on('click', '#uploader', function(event) { 
    $("#url").click(); 
});

$("#url").click(function(){ 
    alert('asd');
});

这可能是唯一的原因，除非脚本没有正确加载，或者在运行JS时遇到一些错误。

请参阅：JSFiddle

如果您希望click事件集中在您的input元素上，您可以使用 .focus（），如之前Alive to Die写的回答中所述。

请参阅：JSFiddle

Answer 6

点击＆amp;专注，只修改几个代码

$('#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.com/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>

JS：无法点击一个元素来触发点击另一个元素

6 个答案: