Can Internet Explorer bind events to absolute positioned elements ?
- by mark
Can Internet Explorer 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 a few tests that don't work in IE:
//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 the elements but no success.
// replace all [ for < , and all ] for
[html]
[head]
[script src="http://code.jquery.com/jquery-latest.js"][/script]
[script type="application/javascript"]
$(document).ready(function(){
$("#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]
