CodesJava

Easy learning with example program codes

jQuery bind()


The jQuery bind() event attaches one or more event handlers of the selected elements and executes a specified function when the event occurs.

Syntax:

$(selector).bind(event,data,function,map)

Event: It is a compulsory parameter as it specifies the events to attach.

Data: It is an optional parameter which is used to specify any additional data.

Function: It is also a compulsory parameter as it specify the function to execute when the event occurs.

Map: It is also an optional parameter which is used to specify an event map.

Features of jQuery bind() events:

  • Compatible on various browsers.
  • Easy and quick.
  • Provides shorthand and easy methods for binding event handlers.

 

Example 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  
	$("button").bind("click", function(){  
    	alert("Width: " + $("div").width());  
	});  
});  
</script>  
</head>  
<body>  
<div style="height:100px;width:500px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>  
<button>Width</button>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Example 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  
	$("h1,h2").bind("click", function(){  
    	$(this).hide();  
	});  
});  
</script>  
</head>  
<body>  
<h1>Click me. I am a ghost.</h1>  
<h2>Me too.</h2>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Sign Up/ Sign In
Ask a Question


Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki