one() method:
One() method is used to attach events to selected elements and also used to specify a function when the event occurs. It is similar to on() and bind() method but the events attached using one() method executes only once for each element.
We can do the same using on() method but we have to explicitly unbind the event using off() method.
Syntax:
$(selector).one(event,data,function)
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").one("click", function(){
$(this).animate({fontSize: "+=7px"});
});
});
</script>
<style type="text/css">
.container{background:#5AB0A6;border:2px solid grey;padding:40px 0px;}
.container .sec-c{margin:0 auto;max-width:800px;}
</style>
</head>
<body>
<div class="container">
<div class="sec-c">
<p>Click on me</p>
<p>One method example</p>
<p>Click On the paragraph to increase size</p>
</div>
</div>
</body>
</html>
In the above example we are increasing the font-size of paragraphs by clicking on it , as we used one() method so it will increase the size only one times of <p> tag on which user will click.
You can check the output of above example here:https://jsfiddle.net/u1obesLb/
0 Comment(s)