Using jQuery Live instead of jQuery Hover function
Posted
by hajan
on ASP.net Weblogs
See other posts from ASP.net Weblogs
or by hajan
Published on Fri, 11 Feb 2011 19:03:00 GMT
Indexed on
2011/02/11
23:26 UTC
Read the original article
Hit count: 556
Let’s say we have a case where we need to create mouseover / mouseout functionality for a list which will be dynamically filled with data on client-side.
We can use jQuery hover function, which handles the mouseover and mouseout events with two functions.
See the following example:
<html lang="en">
<head id="Head1" runat="server">
<title>jQuery Mouseover / Mouseout Demo</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<style type="text/css">
.hover { color:Red; cursor:pointer;}
</style>
<script type="text/javascript">
$(function () {
$("li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
});
</script>
</head>
<body>
<form id="form2" runat="server">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
<li>Data 4</li>
<li>Data 5</li>
<li>Data 6</li>
</ul>
</form>
</body>
</html>
Now, if you have situation where you want to add new data dynamically... Lets say you have a button to add new item in the list.
Add the following code right bellow the </ul> tag
<input type="button" id="addNewItem" value="Add New Item" />
And add the following button click functionality:
$("#addNewItem").click(function (event) {
event.preventDefault();
$("<li>" + $("#txtItem").val() + "</li>").appendTo("ul");
});
The mouse over effect won't work for the newly added items. Therefore, we need to use live or delegate function. These both do the same job. The main difference is that for some cases delegate is considered a bit faster, and can be used in chaining.
In our case, we can use both. I will use live function.
function (event) {
if (event.type == "mouseover") $(this).addClass("hover");
else $(this).removeClass("hover");
});
The complete code is:
<html lang="en">
<head id="Head1" runat="server">
<title>jQuery Mouseover / Mouseout Demo</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<style type="text/css">
.hover { color:Red; cursor:pointer;}
</style>
<script type="text/javascript">
$(function () {
$("li").live("mouseover mouseout",
function (event) {
if (event.type == "mouseover") $(this).addClass("hover");
else $(this).removeClass("hover");
});
//button add new item functionality
$("#addNewItem").click(function (event) {
event.preventDefault();
$("<li>" + $("#txtItem").val() + "</li>").appendTo("ul");
});
});
</script>
</head>
<body>
<form id="form2" runat="server">
<ul>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
<li>Data 4</li>
<li>Data 5</li>
<li>Data 6</li>
</ul>
<input type="text" id="txtItem" />
<input type="button" id="addNewItem" value="Add New Item" />
</form>
</body>
</html>
So, basically when replacing hover with live, you see we use the mouseover and mouseout names for both events.
Check the working demo which is available HERE.
Hope this was useful blog for you.
Hope it’s helpful.
Hajan
Reference blog: http://codeasp.net/blogs/hajan/microsoft-net/1260/using-jquery-live-instead-of-jquery-hover-function
© ASP.net Weblogs or respective owner
