Javascript 单击元素后Jquery选择器不工作

我已经写了一个程序，每次生成随机颜色。而“+”按钮应该产生更多的颜色。单击颜色将使其成为容器的背景，但每次单击“+”按钮时，单击颜色没有任何效果

这是jquery代码

var x=$(".container").width();
var l=50-(((25/x)*100)-((10/x)*100));
$(".foot").css({"left":l+"%"});
/*to adjust position*/
$(".foot").click(function(){
fill();
});
var rand,i,z,htm;
$(document).ready(function(){
fill();
/* the following code doesn't work twice after '+' is clicked  */
/*-------------------*/
$(".sel").click(function(){
z=$(this).attr("bg");
$(".container").css({"background-color":"#"+z});
});
/*-------------------*/
});
function fill(){
rand=0;
$(".content").html(" ");
htm="";
for(i=0;i<5;i++){
     while(rand<100000){
rand=Math.floor(Math.random()*1000000);
}
htm+=
"<"+"div class='sel' bg='"+rand+"'"+">"+
"<"+"div class='content-left' bg='"+rand+"'"+">"+
"<"+"div class='colordot' style='background-color: #"+rand+"'"+">"+"<"+"b"+">"+(i+1)+
"<"+"/"+"b"+">"+
"<"+"/div"+">"+
"<"+"/div"+">"+
"<"+"div class='content-right'"+">"+
"#"+rand+
"<"+"/div"+">"+"
 <"+"/div"+">";
 rand=0;
 }
 $(".content").html(htm);
 }

var x=$（“.container”）.width（）；
var l=50-（（25/x）*100）-（10/x）*100）；
$（“.foot”）.css（{“left”：l+“%”）；
/*调整位置*/
$（“.foot”）。单击（函数（）{
填充（）；
});
变量rand，i，z，htm；
$（文档）.ready（函数（）{
填充（）；
/*单击“+”后，以下代码无法运行两次*/
/*-------------------*/
$（“.sel”）。单击（函数（）{
z=$（this.attr（“bg”）；
$（“.container”）.css（{“背景色”：“#”+z}）；
});
/*-------------------*/
});
函数fill（）{
兰德=0；
$（“.content”）.html（“”）；
htm=“”；
对于（i=0；i在
fill
函数中，您可以重新创建
.sel
元素，这样它们就不再有单击事件。它们被认为是新的。每次在容器中插入新的html时，您都必须绑定事件

var x = $(".container").width();
var l = 50 - (((25 / x) * 100) - ((10 / x) * 100));
$(".foot").css({
  "left": l + "%"
});

$(".foot").click(function() {
  fill();
});


var rand, i, z, htm;



$(document).ready(function() {
  fill();
});

function fill() {
  rand = 0;
  $(".content").html(" ");
  htm = "";
  for (i = 0; i < 5; i++) {
    while (rand < 100000) {
      rand = Math.floor(Math.random() * 1000000);
    }
    htm +=
      "<" + "div class='sel' bg='" + rand + "'" + ">" +
      "<" + "div class='content-left' bg='" + rand + "'" + ">" +
      "<" + "div class='colordot' style='background-color: #" + rand + "'" + ">" + "<" + "b" + ">" +
      (i + 1) +
      "<" + "/" + "b" + ">" +
      "<" + "/div" + ">" +
      "<" + "/div" + ">" +
      "<" + "div class='content-right'" + ">" +
      "#" + rand +
      "<" + "/div" + ">" +
      "<" + "/div" + ">";
    rand = 0;
    z = "";
  }

  $(".content").html(htm);
  bindEvents();
}

function bindEvents() {
  $(".sel").on('click', function() {
    z = $(this).attr("bg");
    $(".container").css({
      "background-color": "#" + z
    });
  });
}

var x=$（“.container”）.width（）；
var l=50-（（25/x）*100）-（10/x）*100）；
$（“.foot”）.css({
“左”：l+“%”
});
$（“.foot”）。单击（函数（）{
填充（）；
});
变量rand，i，z，htm；
$（文档）.ready（函数（）{
填充（）；
});
函数fill（）{
兰德=0；
$（“.content”）.html（“”）；
htm=“”；
对于（i=0；i<5；i++）{
而（兰特<100000）{
rand=Math.floor（Math.random（）*1000000）；
}
热媒+=
"" +
"" +
"" + "" +
（i+1）+
"" +
"" +
"" +
"" +
“#”+兰德+
"" +
"";
兰德=0；
z=“”；
}
$（“.content”）.html（htm）；
bindEvents（）；
}
函数bindEvents（）{
$（“.sel”）。在（'click'，function（）上{
z=$（this.attr（“bg”）；
$（“.container”）.css({
“背景色”：“#”+z
});
});
}

这里有工作