Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to use jquery to click on a element in Jquery functions of JQuery Examples
2752 Views
Note 
.click() functioncalled when you click some element.
Example: 1 when click one div element the next element shown on the page.

Related Topics:

If you create some element dynamically in page, for example by append() function.
Click function will not work for dynamically created element.For that,use:

Example: 2 .on() function,or
Example: 3 .bind() function
Example: 1 when click one div element the next element shown on the page
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").click(function () {
                $(".two").show();
            });
        });
    </script>
    <style>
        .two {
            display: none;
        }
    </style>
</head>

<body>
    <div class="one">one-Click here to show next number</div>
    <div class="two">two</div>
</body>

</html>
Example: 2
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".container").click(function () {
                $(".new").append('<div class="new">new Element</div>');
            });
            $(".new").on("click", function () {
                $(this).css("color", "blue");
            });
        });
    </script>
</head>

<body>
    <div class="container">click here to append element</div>
    <div class="new">new Element</div>
</body>

</html>
Example: 1 Demo 
Example:2 Demo 
Example: 3
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".container").click(function () {
                $(".new").append('<div class="new">new Element</div>');
            });
            $(".new").unbind("click");
            $(".new").bind("click", function () {
                $(this).css("color", "blue");
            });
        });
    </script>
</head>

<body>
    <div class="container">click here to append element</div>
    <div class="new">new Element</div>
</body>

</html>
Example: 3 Demo 
Next Topics
Next lessons of current book.
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details