Question

我是jQuery的新手，所以这应该是一个简单的问题。

据我了解，我可以使用

绑定一个方法来监听事件，例如点击按钮

$('#buttonID').bind('click', function (){//some code});

然而，这对我不起作用，所以我一定做错了。

这是我的简单html文件：

        <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
    <script src='test.js'></script>
    </head>

    <body>
    <input id="SignIn" type="button" value="Sign In"></input>
    </body>
    </html>

除了加载jQuery文件外，它还加载文件test.js，如下所示：

// JavaScript Document
$('#SignIn').bind('click', function() {alert('hi');});

这还不足以绑定吗？我希望这会触发一个警告对话框，但事实并非如此，似乎根本没有执行回调。

这里有什么问题？这两个文件（html和js）都位于同一个目录中，谷歌浏览器不会在JavaScript控制台中抱怨任何内容，所以从这一端来说，一切都应该没问题。

感谢您的帮助！

Answer 1

将代码包装在document ready处理程序中。它接受一个在DOM完全加载时执行的函数。

正在使用jQuery 1.3

$(document).ready(function() {
    $('#SignIn').bind('click', function() {
        alert('hi');
    });
});

对于jQuery 1.7 +，

$(document).ready(function() {
    $('#SignIn').on('click', function() {
        alert('hi');
    });
});

此外，从jQuery 1.7开始，.on()方法是将事件处理程序附加到文档的首选方法。

Answer 2

$(function(){
    $('#SignIn').bind('click', function() {alert('hi');});
})

Answer 3

尝试

$(function(){
   $('#SignIn').click(function() {alert('hi');});
});

Answer 4

将您的Javascript移动到HTML页面的底部，位于结束正文标记的正上方。

这样，DOM在加载时就已准备就绪，并且不需要$(document).ready()次调用。

https://developer.yahoo.com/performance/rules.html#js_bottom

Answer 5

您可能希望在最底部包含JavaScript个文件，一切都应该按预期工作。建议执行此操作并在顶部包含CSS个文件（头标记）。有关更多信息，请参阅@Grim ...

中包含的链接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<input id="SignIn" type="button" value="Sign In"></input>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</body>
</html>

Answer 6

$( "#target" ).click(function() {

//Write some code here

});

Answer 7

你可以试试这个。

$(document).ready(function(){
  $('#SignIn').on('click', function() {alert('hi');});

});

Answer 8

你可以使用它。

$(document).ready(function () { $("#SignIn").click(function () { alert('demo'); }); });

jQuery简单按钮绑定

8 个答案: