無法將CSS更改應用於通過JS / JQuery動態創建的
[英]Trouble applying CSS changes to dynamically created via JS/JQuery
問題描述
我一直在嘗試更改使用JS / JQuery創建的“ .square” div的大小。 我已經成功更改了容器div的大小，但是盡管能夠以其他方式應用事件.square div，但是使用完全相同的代碼對動態創建的.square div也無效。 最近兩天，我一直在試圖理解問題，並且一直在編寫和重寫解決方案，但是我認為我目前的技能正在忽略一個非常簡單的答案。
目的是使.square divs的大小由容器中將有多少個正方形確定。 正方形越多，.square div css越小。
感謝您提供任何幫助。
$(document).ready(function() { var create = function(king) { return $("#container").prepend("<div class='square' id=king></div>"); } var sLoad = function() { for (i = 0; i < 16; i++) { $("#16").click(function() { $("#container").prepend("<div class='square'></div>"); }); }; }; sLoad(); $("#clear").on("click", function() { $(".square").remove(); num = prompt("How many squares would you like?"); // var containerSize = function(){ // var siz = 112 * num; // $("#container").css({"height": siz+15+"px" , "width": siz+"px"}); // } // containerSize() $(".square").css({ "height": "50px", "width": "50px" }); var make = function(num) { return num * num; }; //var squareSize = function(){ // var sqr = 600 / make(num); // $(".square").css({"height":sqr+"px" , "width":sqr+"px"}); //}; //squareSize(); for (i = 0; i < make(num); i++) { $("#container").prepend("<div class='square'></div>"); }; }); // $(".button").click(function(){ // //making the square dis and reappear $("#container").on("mouseenter", function() { $(".square").mouseenter(function() { $(this).fadeTo("fast", 0); }), $(".square").mouseleave(function() { $(this).fadeTo("fast", 1); }); }); });
#menuContainer { height: 45px; width: 50%; margin: auto; } #container { width: 600px; height: 600px; border: 1px blue dotted; border-radius: 2%; margin: auto; padding: 0px; } #controlDiv { height: 30px; width: 30px; border: 1px dashed red; margin: auto; margin-top: 50%; background-color: black; } .square { width: 100px; height: 100px; background-color: grey; border: 1px black dashed; border-radius: 3%; margin: 5px 5px 5px 5px; display: inline-block; } .button { height: 27px; width: 70px; background-color: gold; border: solid 1px yellow; text-decoration-color: blue; border-radius: 5%; text-align: center; padding-top: 7px; /*margin: auto;*/ margin-bottom: 4px; display: inline-block; }
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="menuContainer"> <div class="button" id="16">Click</div> <div class="button" id="clear">Clear</div> </div> <div id="container"> <!-- <div id="controlDiv"></div> --> </div> <!--<div class="square"></div>--> </body> </html>
1 個解決方案
解決方案1
0 已采納 2016-07-12 14:23:50
這個小提琴應該起作用： https : //jsfiddle.net/x0x9rv30/2/
您在移除的元素上應用了CSS，需要先創建元素，然后才能在其上應用CSS。
我只是交換了兩個代碼塊：
之前
$(".square").remove();
$(".square").css({"height":"50px" , "width": "50px"});
for (i = 0; i < make(num); i++){
$("#container").prepend("<div class='square'></div>");
};
后
$(".square").remove();
for (i = 0; i < make(num); i++){
$("#container").prepend("<div class='square'></div>");
};
$(".square").css({"height":"50px" , "width": "50px"});
jQuery將CSS應用於動態創建的表行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.