为什么这个jQuery单击函数不能工作?

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是否正在加载。所以不确定问题是什么。我还做了一个带有警报的文档准备功能，它工作得很好，不知道我做错了什么。请帮助。谢谢!

8 个解决方案

#1

125

You are supposed to add the javascript code in a $(document).ready(function() {}); block.

您应该将javascript代码添加到$(document).ready(函数(){});块。

i.e.

即。

$(document).ready(function() {
  $("#clicker").click(function () {
    alert("Hello!");
    $(".hide_div").hide();
  });
});

As jQuery documentation states: "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文档所言:“在文档“准备好”之前，不能安全地操作页面。$(document).ready()中包含的代码只有在页面文档对象模型(DOM)准备好JavaScript代码执行之后才会运行。

#2

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

最后一周后，我不需要添加onclick triger。我希望这能帮助很多人。

#3

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="http://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>

#4

Try adding $(document).ready(function(){ to the beginning of your script, and then });. Also, does the div have the id in it properly, i.e., as an id, not a class, etc.?

尝试添加$(document).ready(function(){到脚本的开始，然后});而且，div正确地包含id吗?，作为id，而不是类，等等?

#5

You have to wrap your Javascript-Code with $(document).ready(function(){});Look this JSfiddle.

您必须用$(document).ready(function(){})包装javascript代码;

JS Code:

JS代码:

$(document).ready(function() {

    $("#clicker").click(function () {
        alert("Hello!");
        $(".hide_div").hide();    
    });
});

#6

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或一个trasparent img)，它不会点击这个按钮。这听起来很愚蠢，但有时我们认为jQuery不起作用，所有这些都是关于DOM元素的定位。

#7

You can use $(function(){ // code }); which is executed when the document is ready to execute the code inside that block.

您可以使用$(函数(){// code});当文档准备在该块中执行代码时执行。

$(function(){
    $('#clicker').click(function(){
        alert('hey');
        $('.hide_div').hide();
    });
});

#8

Just a quick check, if you are using client-side templating engine such as handlebars, your js will load after document.ready, hence ther will be no element to bind the event to, therefore either use onclick handler or use it on body and check for currentTarget

简单地检查一下，如果您正在使用客户端模板引擎(比如把手)，您的js将在文档之后加载。准备好了，因此没有元素将事件绑定到它，因此要么使用onclick处理程序，要么在body上使用它并检查currentTarget

#1

125