Question

我不明白为什么这个jQuery脚本不起作用;

$( "#send" ).click(function() {
    console.log("ee");
});

console.log("test");

当我加载页面时，我在控制台中看到“test”，因此加载了jQuery页面。但是当我点击#send它就不会起作用了吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Chat-o-matic</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js" type="text/javascript"></script>
        <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="chat.js" type="text/javascript" type="text/javascript"></script>
        <link href="chat.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <div id="container">
            <h1>Chat-o-matic</h1>
            <div id="round">
                <p>Om de chat te joinen, typ een chatnaam in</p>
                <input type="text" id="chatname" placeholder="Typ hier je chatnaam in...">
                <button id="send">Join de chat</button>
            </div>
        </div>
    </body>
</html>

那么，有人知道为什么这不起作用以及如何解决它？

Answer 1

将代码包裹在$(document).ready(function(){........});

中

$(document).ready(function(){
    $( "#send" ).click(function() {
        console.log("ee");
    });    
});

在加载dom元素后绑定事件

http://learn.jquery.com/using-jquery-core/document-ready/

Answer 2

你的第一段javascript应该包含在document.ready函数中。

$(document).ready(function(){ 
    $( "#send" ).click(function() {
        console.log("ee");
        alert("This works!");
    });
    console.log("test");
});

希望这有帮助。

Answer 3

试试这个。

<!DOCTYPE html>
<html>
    <head>
        <title>Chat-o-matic</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js" type="text/javascript"></script>
        <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="chat.js" type="text/javascript" type="text/javascript"></script>
        <link href="chat.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $(document).ready(function(){
                $( "#send" ).click(function() {
                  console.log("ee");
                });

                 console.log("test");
            });
        </script>
    </head>

    <body>
        <div id="container">
            <h1>Chat-o-matic</h1>
            <div id="round">
                <p>Om de chat te joinen, typ een chatnaam in</p>
                <input type="text" id="chatname" placeholder="Typ hier je chatnaam in...">
                <button id="send">Join de chat</button>
            </div>
        </div>
    </body>
</html>

Answer 4

Event Delegation允许我们将单个事件监听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

因此，请将您的点击事件更改为以下

$('#container').on('click', '#send', function() {
    console.log('eee');
})

jQuery单击无法正常工作但jquery已加载

4 个答案: