CODEWITHSUNDEEP
javascriptjqueryhtmlclick
Nijeesh Joshy
Nijeesh Joshy

Reputation: 1481

jquery click() and on() not working

in the below code click() is not working what is the problem i have tried $("login").on("click",function(){}); function also not still not working

<html>

<head>

    <!--- Links --->
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="main.js"></script>
    </head>
    <!--html-->
    <title>Test Page</title>


    <script>
        $("#login").click(function() {
            alert("hai");
        });
    </script>
</head>

<body onload="$('#reg').toggle();">
    <div id="user-area">
        <div class="btn-area">
            <button id="btnlgn" class="btn btn-outline-primary" onclick="toggleReg()">Login /Register</button>

        </div>
        <div id="forms">
            <div class="form" id="reg">
                <form class="form-sigin" id="register">
                    <input type="text" class="form-control" placeholder="Email" id="email">
                    <input type="name" class="form-control" placeholder="Full Name" id="name">
                    <input type="password" class="form-control" placeholder="password" id="password">
                    <input type="password" class="form-control" placeholder="Re-enter password" id="conPassword">
                    <input type="tel" class="form-control" placeholder="Mobile Number" id="number">

                </form>
                <button class="btn" id="register">Register</button>
            </div>
            <div class="form" id="lgn">
                <form class="form-sigin" id="sigin">
                    <input type="text" class="form-control" placeholder="Email" id="emaillgn">
                    <input type="password" class="form-control" placeholder="password" id="passwordlgn">

                </form>
                <button class="btn" id="login">Login</button>
            </div>
        </div>
    </div>
</body>

</html>

i am trying to display an alert when the button is pressed 

 <script>
            $("#login").on("click", function() {
                alert("hai");
            });

        </script>

this is also not working

Upvotes: 1

Views: 64

Answers (2)

levent ayan
levent ayan

Reputation: 11

You should write javascript codes end of the body tags. If you use between head tags, use below.

<script>
    $(function() {
        $("#login").click(function() {
            alert("hai");
        });
    });
</script>

Upvotes: 1

j08691
j08691

Reputation: 207861

You're executing your jQuery before the elements exist on the page. Either move your code to the end of the page before the closing </body> tag, or wrap it in a document ready call:

$( document ).ready(function() {
    $("#login").click(function() {
        alert("hai");
    });
});

Upvotes: 1

Related Questions