Menu
Here is what I have already:
<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> (and here is a jsFiddle of it in operation; http://jsfiddle.net/DUCY3/1/)
Basically in the long term it should continue to add columns/rows when you click the yellow. But it's not even sensing the click event the second time. Not sure why. Thanks.
799
jQuery one() Method When using the one() method, the event handler function is only run ONCE for each element.
You need to change this line:
$('.option').click(function() { //etc to
$('.option').live('click', function(){ //etc This will ensure that all 'option' boxes will get the onclick event. Note that the live method has been replaced in later versions of jQuery with 'on'. See http://api.jquery.com/on/
EDIT: to use with 'on' use delegated events - something like this:
$('#canvas').on('click', '.option', function() { //event handler... } I would use the delegate function, (just in case you ever choose to update to a newer version of jquery),
$(document).delegate('.option', 'click', function(){ //etc }); 2017 Edit: The delegate function has been deprecated, the correct usage would now be
$(document).on('click', '.option', function(){ //etc }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
