这是我已经有了
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css" />
<script src="jquery.js"></script>
<script>
$(function () {
// Page Load
//// Set default size of canvas
var canvas_height = 124;
var canvas_width = 124;
//// Set starting point and first option point
$('#canvas div:first-child').addClass('start');
$('#canvas div:nth-child(2)').addClass('option');
GenerateIDs();
$('#btnID').click(function(){
GenerateIDs();
});
// Generates IDs dynamically
function GenerateIDs(){
var row = 0;
var col = 0;
var lastdivposition = 0;
$('#canvas div').each(function(){
if ($(this).position().top > lastdivposition)
{
row += 1;
col = 1;
}
else
col += 1;
$(this).attr('id',row + '-' + col);
lastdivposition = $(this).position().top
});
}
$('.option').click(function(){
if($(this).attr('id').split('-')[0] != $(this).next().attr('id').split('-')[0])
{
$('.option').each(function(){
$(this).removeClass('option');
});
AddDivs('c')
GenerateIDs();
$(this).removeClass('option').removeClass('blank').addClass('object');
//$(this).next().addClass('option');
$('.object').each(function(){
if($('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).hasClass('blank'))
$('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).removeClass('blank').addClass('option');
if($('#' + (parseInt($(this).attr('id').split('-')[0]) + 1) + '-' + $(this).attr('id').split('-')[1]).hasClass('blank'))
$('#' + (parseInt($(this).attr('id').split('-')[0]) + 1) + '-' + $(this).attr('id').split('-')[1]).removeClass('blank').addClass('option');
});
}
});
// Adds row if type = r,column if type = c
function AddDivs(type){
if(type == 'r')
{
canvas_height += 62;
$('#canvas').children('div').each(function(){
if($(this).position().top == $('#canvas div:first-child').position().top)
$('#canvas').append('<div class="blank"></div>');
});
$('#canvas').css('height',canvas_height + 'px');
}
if(type == 'c')
{
canvas_width += 62;
$('#canvas').children('div').each(function(){
if($(this).position().left == $('#canvas div:first-child').position().left)
$('#canvas').append('<div class="blank"></div>');
});
$('#canvas').css('width',canvas_width + 'px');
}
}
});
</script>
<style>
#canvas,#toolBox {float:left; height:124px; margin:25px; padding:5px; width:124px;}
.blank {background-color:gray;}
.start {background-color:green;}
.object {background-color:blue;}
.option {background-color:yellow;}
body div {border:1px solid black;}
body div div {float:left; height:50px; margin:5px; width:50px;}
</style>
</head>
<body>
<div id="toolBox">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="canvas">
<div class="start"></div>
<div class="option"></div>
<div class="blank"></div>
<div class="blank"></div>
</div>
<br /><br />
<div style="background-color:#AAAAAA; clear:left;">
<input id="btnID" type="button" value="Generate IDs" />
<input id="btnAddRow" type="button" value="Add Row" />
<input id="btnAddCol" type="button" value="Add Col" />
- LEGEND:
<span style="color:green; font-size:20px; font-weight:bold;">START</span>
<span style="color:yellow; font-size:20px; font-weight:bold;">OPTION</span>
<span style="color:blue; font-size:20px; font-weight:bold;">OBJECT</span>
</div>
</body>
</html>
(这里是运行中的jsFiddle; http://jsfiddle.net/DUCY3/1/)
从长远来看，当您点击黄色时，应继续添加列/行。但是，它甚至没有第二次感测到点击事件。不知道为什么谢谢。
解决方法
你需要改变这一行：
$('.option').click(function() { //etc
至
$('.option').live('click',function(){ //etc
这将确保所有“选项”框将获得onclick事件。请注意，在“on”的jQuery的更高版本中已经替换了live方法。见http://api.jquery.com/on/
编辑：使用’on’使用委托事件 – 类似这样：
$('#canvas').on('click','.option',function() {
//event handler...
}
