jQuery简单的按钮绑定

我是jQuery的新手，所以这应该是一个简单的问题。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）都位于同一个目录中，并且Google Chrome不会抱怨JavaScript控制台中的任何内容，所以从这一点来看，一切都应该没问题。

感谢您的帮助！

来源

2014-09-05 hansa

你需要一个'$（文件）.ready'功能，阅读jQuery的文档，它在几乎每一个例子，一个是你将学到的第一件事。 – adeneo 2014-09-05 11:37:44

另外，使用'on'，而不是'bind' – adeneo 2014-09-05 11:38:03

@adeneo他正在使用jQuery 1.3.2队友， – 2014-09-05 11:39:03

将你的代码包装在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()方法是事件处理程序的附连到文档的优选方法。

来源

2014-09-05 11:38:06 Satpal

啊，是的，快速和简单的答案。谢谢！一旦SO允许我这样做，将会标记为答案。 – hansa 2014-09-05 11:39:37

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

来源

2014-09-05 11:38:51 ainu

尝试

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

来源

2014-09-05 11:38:53 kefy

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

//Write some code here 

});

来源

2014-09-05 11:39:36 user2412232

你可以试试这个。

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

});

来源

2014-09-05 11:41:10 Dileep

请解释OP的代码有什么问题，以及为什么通过编辑您的答案来解决问题。 – 2014-09-05 11:59:49

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

通过这种方式，DOM在加载时就绪，并且不需要$(document).ready()调用。

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

来源

2014-09-05 11:41:34

您可能要包括你的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>

来源

2014-09-05 11:42:36 PeterKA

您可以使用它。

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

来源

2014-09-05 11:45:42 prog1011

＃user2606742 - 如果答案有用，请点击'正确'并给'upvote'，这样可以帮助其他人找出正确的解决方案。 – prog1011 2014-09-05 11:46:56

jQuery简单的按钮绑定

回答

相关问题