jQuery`.click（）`不工作

我无法让.click()中的函数完全执行。如果我的块之前把它alert("Hello");给予警报，但其余部分将不执行......jQuery`.click（）`不工作

我想，当我。单击一个div #loginPopTrigger另一格#loginpop变淡然后如果我点击#loginpop或#closelogin，#loginpop衰出。

在此先感谢！

下面是代码我现在所拥有的：

HTML

<head> 
    <title>MainFrame</title> 

    <script src="../bower_components/webcomponentsjs/webcomponents.js"></script> 
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script> 
    <script type="text/javascript" src="../js/Java.js"></script> 

    <link href="stylesheets/Index.css" rel="stylesheet" type="text/css"/> 

    <link rel="import" href="../bower_components/polymer/polymer.html"> 
    <link rel="import" href="../bower_components/iron-input/"> 
    <link rel="import" href="../bower_components/paper-button/paper-button.html"> 
    <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html"> 
    <link rel="import" href="../bower_components/paper-input/paper-input.html"> 
</head> 

<body> 

    <div id="HeaderContainer">   
     <div id="loginPopTrigger"> 
      <li>Login</li> 
     </div> 
    </div>   

    <div id="loginPop"> 
     <div id="closelogin"> 
      <span></span> 
      <span></span> 
     </div> 
     <div id="loginContainer"> 
      <div id="title"> 
       <div id="logologin"></div>... 
      </div> 

      <paper-input label="Email Address or ID" floatinglabel></paper-input> 
      <paper-input type="password" label="Password" floatinglabel></paper-input> 

      <div id="forgot">Forgot?</div> 
      <div id="LoginPageOptions"> 
       <paper-checkbox id="staylogged">Stay Logged On</paper-checkbox> 
       <div id="googlelogin">Login with Google+</div> 
      </div> 
      <div id="LoginPageButtons"> 
       <paper-button id="loginButton" raised>Login</paper-button> 
       <paper-button id="signupbutton" raised>Sign Up</paper-button> 
      </div> 
     </div> 
    </div>

CSS

/*----------------------------------------- BASIC --------------------------------------*/ 
@font-face { 
    font-family: main; 
    src: url(Fonts/MGNORMAL.TTF); 
} 

a:link, a:visited { 
    color: #fff; 
    text-decoration: none; 
} 

body { 
    margin: auto; 
    width: 100%; 
    background-color: #2a2a2a; 
} 

/*----------------------------------------- HEADER --------------------------------------*/ 

#HeaderContainer { 
    position: relative; 
    height: 5%; 
    top: 2.5%; 
    left: 5%; 
    width: 90%; 
} 

#loginPopTrigger { 
    position: absolute; 
    font-family: main; 
    font-size: 20; 
    list-style: none; 
    color: #fff; 
    font-size: 18; 
    left: 90%; 
    top: 28%; 
    cursor: pointer; 
} 

#loginPopTrigger:hover { 
    opacity: 0.4; 
} 

/*----------------------------------------- LOGIN POPUP --------------------------------------*/ 

#loginpop { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 3; 
    background-color: rgb(242, 242, 242); 
    height: 100%; 
    width: 100%; 
} 

#loginContainer { 
    position: absolute; 
    width: 16%; 
    height: 20%; 
    left: 42%; 
    top: 35%; 
    font-family: main; 
    color: #2a2a2a; 
} 

#title{ 
    font-size: 35; 
    width: 100%; 
    text-align: center; 
} 

#forgot { 
    position: absolute; 
    font-family: roboto; 
    color: #2a2a2a; 
    font-size: 14; 
    top: 129; 
    left: 80%; 
} 

#LoginPageOptions{ 
    width: 100%; 
    position: absolute; 
    top:; 
} 

#staylogged { 
    position: absolute; 
    left: 0; 
    --paper-checkbox-checked-color: var(--paper-black-500); 
    --paper-checkbox-checked-ink-color: var(--paper-black-500); 
} 

#googlelogin { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

#LoginPageButtons{ 
    position: absolute; 
    top: 100%; 
    width: 100%; 
} 

#loginButton { 
    position: absolute; 
    left: 20%; 
    background: #000; 
    color: #fff; 
} 

#signupbutton { 
    position: absolute; 
    right: 20%; 
} 

/*-- CLOSE LOGIN POPUP --*/ 
#closelogin { 
    width: 40px; 
    height: 40px; 
    position: relative; 
    top: 2.6%; 
    left: 97%; 
    cursor: pointer; 
} 

#closelogin span { 
    position: absolute; 
    height: 1px; 
    width: 20; 
    background: #000; 
    margin: 24%; 
} 

#closelogin span:nth-child(1) { 
    top: 10; 
    -webkit-transform: rotate(135deg); 
    -moz-transform: rotate(135deg); 
    -o-transform: rotate(135deg); 
    transform: rotate(135deg); 
} 

#closelogin span:nth-child(2) { 
    top: 10; 
    -webkit-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -o-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
}

$(document).ready(function() { 
    $('#loginPopTrigger').click(function() { 
     alert("Hello"); //This executes 
     $('#loginpop').fadeToggle(); //This does not 
    }); 

    $("#closelogin").click(function() { 
     $('#loginpop').fadeToggle(); 
    }); 

    $("#loginpop").click(function() { 
     $(this).fadeToggle(); 
    }); 
});

来源

2015-06-26 farasatulislammirza

什么是webcomponents.js？ –

你是否在控制台中发现任何错误？ – Craicerjack

id loginPop！= loginpop –

的id是错误的：

$('#loginPopTrigger').click(function() { 
    $('#loginPop').fadeToggle(); //This does not 
}); 

$("#closelogin").click(function() { 
    $('#loginPop').fadeToggle(); 
}); 


$("#loginPop").click(function() { 
    $(this).fadeToggle(); 
});

较短的方式

$('#loginPopTrigger, #closelogin, #loginPop').click(function() { 
    $('#loginPop').fadeToggle(); 
});

来源

2015-06-26 14:07:55 Prasanna

这个技巧！但是，你认为'id'是什么意思？只是这样我才能避免将来的错误。 – farasatulislammirza

您忘记了loginPop中的大写字母p – loli

改变这样的脚本的顺序。

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script> 
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script> 
<script type="text/javascript" src="../js/Java.js"></script>

因为如果任何webcomponents.js功能的使用jQuery的，它会抛出一个错误。

来源

2015-06-26 14:10:12

您使用了错误的ID（您忘记了骆驼案例）。此外，您应该使用on（）方法而不是click（）：

$(document).ready(function() { 
    $('#loginPopTrigger').on('click',function() { 
    $('#loginPop').fadeToggle(); //This does not 
    }); 
});

来源

2015-06-26 14:13:49

它看起来像ids不一样。在html中是loginPop，在js中是loginpop。它们区分大小写，所以有时很容易错过。看看下面的jsfiddle。

https://jsfiddle.net/c6ojsb6c/1/

来源

2015-06-26 14:22:35 habibg

jQuery`.click（）`不工作

回答

相关问题