Reputation: 141

jQuery `.click()` not working

I am having trouble getting the function inside .click() to execute fully. If I put alert("Hello"); before the block it give the alert but the rest won't execute...

I want that when I click a div #loginPopTrigger another div #loginpop fades in. Then if I click #loginpop or #closelogin, #loginpop fades out.

Thanks in advance!

Here is the code I have right now:

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();
    });
});

Upvotes: 1

Answers (4)

habibg

Reputation: 185

It looks like the ids are not the same. In the html it's loginPop and in js it's loginpop. They are case sensitive so sometimes it's easy to miss. Check out the jsfiddle below.

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

Upvotes: 0

Mehdi Brillaud

Reputation: 1866

You use the wrong ID (you forgot the camel case). Also, you should use on() method instead of click() :

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

Upvotes: 0

Anoop Joshi P

Reputation: 25527

Change the order of scripts like this.

<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>

Because if any of the function in webcomponents.js uses jquery, it will throw an error.

Upvotes: 2

Prasanna

Reputation: 779

The id is wrong:

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

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


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

Shorter way

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

Upvotes: 4

jQuery `.click()` not working

Answers (4)

Related Questions