Home » JavaScript » jQuery » jQuery bind example

About Saeb Najim

Saeb Najim
Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.

jQuery bind example

The aim of this example is to show you how to use the jQuery bind() method. This method is used to attach a handler to an event of HTML elements.

This method has three overloaded signatures

1- .bind( eventType [, eventData ], handler )
The event type is the event name as “click”,”change”, etc. This method can bind one handler to many events, the event types must be separated by a space as “click change”.

2- .bind( eventType [, eventData ] [, preventBubble ] )
This signature is used to prevent an event where preventBubble is a boolean value, set preventBubble to false will prevent the event.

3- .bind( events )
Here we can bind many events at same time. Each event has it’s own handler. It’s syntax is like $( "selector" ).bind({event1: handler1,event2: handler2});.

Let’s look at some examples. To download the jQuery library, click here.

1. HTML

First of all you need to create a simple html document.

<!DOCTYPE html>
<html>
<head>
	<title>jQuery bind example</title>
	<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<!-- HTML -->

</body>
</html>

2. jQuery bind examples

2.1 Changing the input text value to uppercase example

Let’s add the following simple html code.

Last Name :<input  type="text" id="lastName"/>

As you can notice in the following jQuery code, the line 2 of the code binds a handler to change event.

<script type="text/javascript">
$( "#lastName" ).bind("change",function () {
	var value = $(this).val().toUpperCase();	
	$(this).val(value);	
});
</script>

The result in the browser would be:

Changing the input text value to uppercase

Changing the input text value to uppercase

2.2 Prevent click event example

Let’s add the following simple html code.

<a href="http://www.webcodegeeks.com/" class="link" id="link1">Link1</a><br/>
<a href="http://www.webcodegeeks.com/" class="link" id="link2">Link2</a>

The following code is used to prevent the click event of the second link.

<script type="text/javascript">
$( "#link2" ).bind("click",false);
</script>

The result in the browser would be:

Prevent click event example

Prevent click event example

2.3 Binding mouse events

Let’s add the following simple html code.

<div> id="container" style="width:100px;height:100px;background-color:#f00"></div>

In the following jQuery code, the third bind() method signature is used to bind many events at the same time.

<script type="text/javascript">
$("#container").bind({
	mouseenter:function(){
		$(this).css("background-color","#0f0");
	},
	mouseleave:function(){
		$(this).css("background-color","#f00");
	}
});
</script>

The result in the browser would be:

Binding mouseenter , mouseleave events

Binding mouseenter , mouseleave events

3.Conclusion

The jQuery provides easy method to bind a handler to an event of HTML elements. The jQuery .bind() is used for this purpose. This method has many overloaded signatures that can be used.

4. Download

Download: You can download the full source code of this example here : jQuery bind example
(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments