jQuery bind() Method - CodingTag
×


jQuery bind()

0 792

  • This function is used In jQuery to attach one or more event handlers to one or more HTML DOM elements.
  • It binds a function to run when the event occurs.
  • The working of this function is the same as the working of jQuery on() method.

Related Topics:

jQuery click
jQuery dblclick

jQuery bind

Syntax:

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

Parameter description:

  • event: This parameter represents one or more events to attach to the elements. Multiple values can be added by separating each of them by commas. It is a required parameter.
  • data: This parameter represents the additional data to pass along to the function. It is optional.
  • function: This represents a function that is run when the event occurs. It is a required parameter.
  • map: This represents an event map that contains one or more events to attach to the elements, and also contains functions to run when the event occurs

Example 1

In this example, we learn how to attach multiple events to an element.

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".bt").dblclick(function(){
$(this).css("background","green");
$("body").css("background","yellow");
});

$("p").dblclick(function(){
$(this).css("display","none");
});
});
</script>
</head>
<body>

<h2>jQuery Bind event Example</h2>

<p>Double click on me to hide me.</p>
<p>Double click on me to hide me.</p>
<button class="bt">Double Click me to change the color of background</button>

</body>
</html>

Output:

After, hover the cursor on paragraph,

Example 2

In this example, we will learn how to use an event map to attach several events/functions to the selected elements.

<html>
<head>
<title> jQuery Example </title>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style>
.my2 {
font-size: 35;
color: green;
}
</style>
<script>
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle(); $(this).css("background","green");},
mouseover:function(){$("body").css("background-color", "gray");$("h2").toggleClass("my2");},
mouseout:function(){$("body").css("background-color", "#FFFFFF");$("h2").toggleClass("my2");}
});
});
</script>
</head>
<body>

<h2> jQuery Bind event Example </h2>
<p> This is a paragraph. </p>
<button> Click me! </button>
</body>
</html>

Output:

When you hover the cursor on the button,

Example 3

In this example, we will learn how to pass along data to a custom named event handler.

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
function myFunction(e){
alert(e.data.msg);
}

$(document).ready(function(){
$("button").bind("click", {msg: "You just clicked the button!"}, myFunction)
});
</script>
</head>
<body>

<h2>jQuery Bind event Example</h2>
<button>Click me!</button>
</body>
</html>

Output:

When you click the button,



Best WordPress Hosting


Share:


Leave a Reply


Comments
    Waiting for your comments