这是我已经拥有的:
<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 事件。请注意，live 方法在 jQuery 的更高版本中已被替换为“on”。请参阅http://api.jquery.com/on/
编辑:与“on”一起使用使用委托(delegate)事件 - 像这样:
$('#canvas').on('click', '.option', function() {
//event handler...
}
关于JQuery 点击事件只起作用一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10194728/