为什么这个 jQuery 单击功能不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18602331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is this jQuery click function not working?
提问by starbucks
Code:
代码：
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
The above code doesn't work. When I click on #clicker, it doesn't alert and and it doesn't hide. I checked the console and I get no errors. I also checked to see if JQuery was loading and indeed it is. So not sure what the issue is. I also did a document ready function with an alert and that worked so not sure what I am doing wrong. Please help. Thanks!
上面的代码不起作用。当我点击#clicker 时，它不会发出警报，也不会隐藏。我检查了控制台，没有任何错误。我还检查了 JQuery 是否正在加载，确实是。所以不确定是什么问题。我还做了一个带有警报的文档准备功能，它起作用了，所以不确定我做错了什么。请帮忙。谢谢！
回答by mobius
You are supposed to add the javascript code in a $(document).ready(function() {});block.
您应该在$(document).ready(function() {});块中添加 javascript 代码。
i.e.
IE
$(document).ready(function() {
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
});
As jQuery documentationstates: "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready()will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute"
正如jQuery 文档所述：“在文档“准备好”之前，不能安全地操作页面。jQuery 会为您检测到这种准备状态。$( document ).ready()只有当页面文档对象模型 (DOM) 准备好用于 JavaScript 时，其中包含的代码才会运行要执行的代码”
回答by user5636597
I found the best solution for this problem by using ON with $(document).
我通过将 ON 与 $(document) 一起使用找到了解决此问题的最佳解决方案。
$(document).on('click', '#yourid', function() { alert("hello"); });
for id start with see below:
对于 id 开头，请参见下文：
$(document).on('click', 'div[id^="start"]', function() {
alert ('hello'); });
finally after 1 week I not need to add onclick triger. I hope this will help many people
终于在 1 周后我不需要添加 onclick 触发器。我希望这会帮助很多人
回答by SaidbakR
Your code may work without document.ready() just be sure that your script is after the #clicker. Checkout this demo: http://jsbin.com/aPAsaZo/1/
您的代码可以在没有 document.ready() 的情况下工作，只需确保您的脚本在 #clicker 之后。查看此演示：http: //jsbin.com/aPAsaZo/1/
The idea in the ready concept. If you sure that your script is the latest thing in your page or it is after the affected element, it will work.
准备好的概念中的想法。如果您确定您的脚本是页面中的最新内容，或者它在受影响的元素之后，它就会起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<a href="#" id="clicker" value="Click Me!" >Click Me</a>
<script type="text/javascript">
$("#clicker").click(function () {
alert("Hello!");
$(".hide_div").hide();
});
</script>
</body>
</html>
Notice:In the jsbindemo replace httpwith httpsthere in the code, or use this variant Demo
回答by Black Sheep
回答by tjons
Try adding $(document).ready(function(){to the beginning of your script, and then });. Also, does the divhave the id in it properly, i.e., as an id, not a class, etc.?
尝试添加$(document).ready(function(){到脚本的开头，然后添加});. 另外，divid 是否正确地包含在其中，即作为 id，而不是类等？
回答by vicgilbcn
Be sure there is nothing on your button (such a div or a trasparent img) that keeps from clicking the button. It sounds stupid, but sometimes we think that jQuery is not working and all that stuffs and the problem is on the positioning of DOM elements.
确保您的按钮上没有任何东西（例如 div 或透明 img）阻止单击按钮。这听起来很愚蠢，但有时我们认为 jQuery 不起作用，所有这些问题都出在 DOM 元素的定位上。
回答by Rakyesh Kadadas
You can use $(function(){ // code });which is executed when the document is ready to execute the code inside that block.
您可以使用$(function(){ // code });which 在文档准备好执行该块内的代码时执行。
$(function(){
$('#clicker').click(function(){
alert('hey');
$('.hide_div').hide();
});
});
回答by Abhinav Singh
Just a quick check, if you are using client-side templating engine such as handlebars, your js will load after document.ready, hence there will be no element to bind the event to, therefore either use onclick handler or use it on the body and check for current target
快速检查一下，如果您使用的是客户端模板引擎（例如把手），则您的 js 将在 document.ready 之后加载，因此将没有要绑定事件的元素，因此要么使用 onclick 处理程序，要么在主体上使用它并检查当前目标
