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