Question

大家好，我是jQuery的新手，我一直在努力解决这个问题没有成功。我尝试使用以下代码生成一些div，并且我想让它们可点击，以便当有人点击它们时，背景变为红色。

这是生成div

的jquery代码

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

您的代码似乎很好，您只需要为＆＃34; .red＆＃34;提供CSS类。你要添加的课程。这是一个小提琴：

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

CSS区域：

.red { background-color: red; }

如果更有用，您也可以切换课程。

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

修订小提琴：

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

Jquery单击生成的具有相同类的div

2 个答案: