Bug Tracker

Ticket #5884: mouseenter.html

File mouseenter.html, 1.2 KB (added by oyejorge, January 21, 2010 12:04AM UTC)

Shows differences between bind() and live() with mouseenter/mouseleave

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
  <style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
  <script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
	
	
	
	
	
<div class="out bind"><p>move your mouse:bind</p><div class="in bind"><p>move your mouse:bind</p><p>0</p></div><p>0</p></div>

<div class="out live"><p>move your mouse:live</p><div class="in live"><p>move your mouse:live</p><p>0</p></div><p>0</p></div>


<script>
    var i = 0;
    $("div.bind").bind('mouseenter',function(){
      $("p:first",this).text("bind:mouse enter");
      $("p:last",this).text(++i);
    }).bind('mouseleave',function(){
      $("p:first",this).text("bind:mouse leave");
    });

    var n = 0;
    $("div.live").live('mouseenter',function(){
      $("p:first",this).text("live:mouse enter");
      $("p:last",this).text(++n);
    }).live('mouseleave',function(){
      $("p:first",this).text("live:mouse leave");
    });

</script>
</body>
</html>

Download in other formats:

Original Format