单击元素后Jquery选择器不工作
Jquery selector not working after an element is clicked
我写了一个程序,每次都生成随机颜色。并且"+"按钮应该生成更多的颜色。点击颜色会使其成为容器的背景,但每次点击"+"按钮时,点击颜色对没有影响
这是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);
}
这是节目的小提琴https://jsfiddle.net/megatroncoder/2o7xL3p1/
在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
});
});
}
这是工作小提琴
相关文章:
- 为什么不'在JQuery中找到第二个css选择器的工作
- jQuery选择器无法正常工作
- JavaScriptDOM正常工作时JQuery选择器不工作
- JS-颜色选择器只有第一个工作
- 取消光谱颜色选择器不工作
- 复杂选择器在jQuery 1.8中中断,但在1.7.2中工作
- jQuery选择器在脚本中不起作用,但在控制台中工作
- 当页面回发ASP.NET时,时间选择器javascript将停止工作
- 添加Jquery验证后,Jquery日期选择器无法工作
- ajax调用后$('')选择器不工作
- webview日期选择器可以在android模拟器中工作,但不能在设备上工作
- jQuery类选择器工作不稳定
- 此选择器正在工作
- jQuery.not()选择器无法与类一起工作
- jQuery UI日期选择器不工作
- bootstrap日期选择器轨道无法通过带有bootstrap模式的simple_form工作
- Jquery日期选择器addclass()不工作
- JQuery Mobile中的日期选择器不工作
- jQuery日期选择器在Firefox和IE的MVC部分视图上进行ajax更新后无法工作
- Eonasdan日期时间选择器没有'不能在联机模式下工作