Jquery нажмите на сгенерированные divs с тем же классом

Question

Привет, ребята, я новичок в jQuery, и я не смог добиться успеха, чтобы решить эту проблему. Я пытаюсь сгенерировать некоторые divs со следующим кодом, и я хочу сделать их кликабельными, поэтому, когда кто-то нажимает на них, фон становится красным.

Вот JQuery код, который генерирует DIV

function drawCanvas(){ 
    var divHeight = 4; 
    var counter = 0; 
    for (var j =0; j <6; j++){ 
     for(var i = 0; i <= 3 ; i++){ 
      var left = j*105; 
      var top = i *105;     
      $("#area").append("<div class='tile' style='height:100px; width:100px; position:absolute; top:"+top+"px; left:"+left+"px; border:1px solid black; '></div> ");     
     }    
    } 
} 


$("#canvasSubmit").click(function(){ 
    var radioValue = $("input[name='optionsRadios']:checked").val(); 
    if(radioValue == 1){ 
     $("#area").width(600); 
     $("#area").height(400); 
     drawCanvas(); 
    } 
    else if(radioValue == 2){ 
     $("#area").width(600); 
     $("#area").height(600); 
    } 
    if(radioValue == 3){ 
     $("#area").width(900); 
     $("#area").height(600); 
    } 
}); 

и вот что я пытался до сих пор не имели успеха

$(this).find(".tile").click(function(i){ 
    $(this).addClass("red"); 
}); 

и здесь с помощью on(), но он также не работает

$(".tile").on("click", function(){ 
    $(this).addClass("red"); 
}); 

Не могли бы вы помочь мне ???

Answer 1

Вы должны использовать event delegation. Ваш слушатель должен выглядеть следующим образом:

$('#area').on('click', '.tile', function() { 
    $(this).addClass('red'); 
} 

Answer 2

Ваш код, кажется, хорошо, вам просто нужно иметь класс CSS для «.red» класса, который вы добавляете. Вот скрипку:

http://jsfiddle.net/madkidflash/bjmpqn4t/

CSS Площадь:

.red { background-color: red; } 

Вы также можете переключать класс, если это более полезно.

$(".tile").click(function(i){ 
    $(this).toggleClass("red"); 
}); 

Пересмотренный Fiddle:

http://jsfiddle.net/madkidflash/bjmpqn4t/2/