IE Internet Explorer can't bind events to absolute positioned elements
Hey folks,
here comes a simple one.
Internet Explorer can't bind events to absolute positioned elements ?
I can't bind a "click" to an element that is overlapping another.
Have tried loads of different ways, here are 5 of them:
version 1:
$(".classHolder").click(function(){ alert( $(this).html() ); });
version 2:
$(".classHolder").each(function(){ $(this).click(function(){ alert( $(this).html() ); }); });
version 3:
$("#id3").click(function(){ alert( $(this).html() ); });
version 4:
$("#id3").click(function(){ alert( $(this).html() ); });
$("#id3").trigger("click");
in all trials I tested with and without:
$("img").unbind();
$("div").unbind();
just to make sure no "ghost" events were bind into my elements
he is a sample that works for FF2+ but not for IE
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="application/javascript">
$(document).ready(function(){
// works for FF not for IE
$(".classHolder").click(function(){ alert( $(this).html() ); });
// works for FF not for IE
$(".classHolder").each(function(){ $(this).click(function(){ alert( $(this).html() ); }); });
// works for FF not for IE
$("#id3").click(function(){ alert( $(this).html() ); });
$("#id3").trigger("click");
});
</script>
</head>
<body>
<div id="id1" style="position:relative;">
<img id="id2" src="http://www.google.co.uk/intl/en_com/images/srpr/logo1w.png" style=";z-index:-1;"/>
<div id="id3" class="classHolder" style="position:absolute;border:2px solid red;left:0px;top:0px;width:70px;height:70px;z-index:1002;">G</div>
<div id="id4" class="classHolder" style="position:absolute;border:2px solid red;left:210px;top:0px;width:25px;height:70px;z-index:1001;">L</div>
asd asdf asdfg
</div>
</body>
</html>