Here is a link to the code on JFiddle: http://jsfiddle.net/4v2n7wk9/1/
<html>
<head>
<title>Example of Grid Buttons</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
div{
display:inline-block;
margin-left:-2px;
margin-right:-2px;
margin-top:-4px;
margin-bottom:-4px;
position:relative;
}
.inl{
position:absolute;
display:block;
}
.top{
position:absolute;
z-index:auto;
}
.feature_layer{
position:absolute;
z-index:-2;
}
.unit_layer{
position:absolute;
z-index:-1;
}
.first_column{
position:absolute;
margin-left:0;
}
.second_column{
position:absolute;
margin-left:64px;
}
.third_column{
position:absolute;
margin-left:128px;
}
#first_row{
position:absolute;
margin-top:0;
}
#second_row{
position:absolute;
margin-top:64px;
}
#third_row{
position:absolute;
margin-top:128px;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#first_row").on("click",function(){
console.log("First row clicked.");
});
$("#second_row").on("click",function(){
console.log("Second row clicked.");
});
$("#third_row").on("click",function(){
console.log("Third row clicked.");
});
$(".first_column").on("click",function(){
console.log("First column clicked.");
});
$(".second_column").on("click",function(){
console.log("Second column clicked.");
});
$(".third_column").on("click",function(){
console.log("Third column clicked.");
});
});
</script>
Menu Below<br>
<div id="first_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_column" id="first_row" > <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="first_row" class="third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="third_column"> <img " src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
</body>
</html>
I've hit a wall trying to solve this conundrum. The example above shows a simple layout of nine image divs in a three-by-three grid with different row and column identifiers. However, while the first column functions correctly, the two columns to the right only register column IDs in the console log.
This issue seems straightforward, but I can't seem to figure it out. Any assistance would be greatly appreciated. Thank you.
*To view console logs, right-click on JSFiddle's result screen (bottom-right of the four panes) and select Inspect Element in Chrome. The console records console.log() calls along with other information.