JQuery click事件只能运行一次

这是我已经拥有的：

     $(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('
'); }); $('#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('
'); }); $('#canvas').css('width', canvas_width + 'px'); } } });   #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;}    
 
 
 
 
 
 
 
 
 
 
 
 

 
    - LEGEND: START OPTION OBJECT 
  ​ 

（这里有一个jsFiddle运行; http://jsfiddle.net/DUCY3/1/ ）

基本上从长远来看，当你点击黄色时它应该继续添加列/行。 但它甚至没有第二次感知到点击事件。 不知道为什么。 谢谢。

Answer 1

您需要更改此行：

 $('.option').click(function() { //etc 

至

 $('.option').live('click', function(){ //etc 

这将确保所有“选项”框都能获得onclick事件。 请注意，live方法已在更高版本的jQuery中替换为’on’。 见http://api.jquery.com/on/

编辑：使用’on’使用委托事件 – 这样的事情：

 $('#canvas').on('click', '.option', function() { //event handler... } 

Answer 2

我会使用委托函数，（以防万一你选择更新到更新版本的jquery），

 $(document).delegate('.option', 'click', function(){ //etc }); 

2017编辑：委托函数已被弃用，现在正确使用

 $(document).on('click', '.option', function(){ //etc });