Question

我正在尝试在点击“登录”链接时激活警报，令人惊讶的是没有任何反应。我需要一些帮助。

点击登录链接时我想要弹出窗口警告，但令人惊讶的是没有任何反应。谢谢，米克

<!DOCTYPE html>
<html>
<head>
<title>Facebook Client-side Authentication Example</title>
<script src="jquery.js" type="text/javascript"></script>

</head>
<body>

<div id="fb-root"></div>
<script type="text/javascript">
    // want Alert to popup when I click on auth-loginlink
$("#auth-loginlink").on("click",function () {
  alert("hi hello");
});
// ultimately I would like this to be binded with login and logout link
$("#auth-logoutlink").on("click", bindLogout);

function bindLogin(event){
alert("hello");
//FB.login();
};

function bindLogout(event){
alert("Out !!!");
//FB.logout();
};      

</script>
<h1>Facebook Client-side Authentication Example</h1>
    <div id="auth-status">
    <div id="auth-loggedout">
        <a href="#" id="auth-loginlink">Login</a>
    </div>
    <div id="auth-loggedin" style="display:none">
        Hi, <span id="auth-displayname"></span>  
        (<a href="#" id="auth-logoutlink">logout</a>)
    </div>
    </div>
</body>
</html>

Answer 1

您的代码在页面中加载元素之前执行。

这是因为您的脚本位于HTML中的元素之上。

您需要在页面底部移动脚本，或者在DOM准备好后调用它更健壮的方式。

jQuery提供了一种方法。

$(document).ready(function(){
 // your code in here will be called after the DOM is ready
});

或

的简短版本

$(function(){
     // your code in here will be called after the DOM is ready
});

http://api.jquery.com/ready/

上的文档

Answer 2

你必须使用：

$(function() {
  //Your code here
})

因为代码在页面加载后执行。

Answer 3

JQuery中的所有内容都需要在

中

$(document).ready(function() {
});

除了功能定义。否则，你正试图将处理程序注册到尚不存在的东西。

Answer 4

问题是<script>中的函数未绑定到标记。确保在文档准备好时耦合JQuery函数。使用此构造：

 $(document).ready(function(){
//Add your functions here. 
//Use the JQuery-Factory-function to construct JQuery-Objects, encapsulating the tag:

$(SELECTOR).click(YOURFUNCTION);

 });

更强大的方法是使用“JQuery-Add-On-Code”创建一个新的JS-File：

(function($){
$(document).ready(function(){

//Your own JQuery-Code
});
})(jQuery);

jQuery - onClick没有被激活

4 个答案: