如何在新的动态元素上应用 bootstrap css？
我在使用动态 dom 元素的 boostrap 时遇到问题。
如果我加载带有整个 html 的页面，它可以工作，但是当添加新的 div 时，我不能使用 Bootstrap 类。
为了测试，我添加了一个类来更改背景颜色，效果很好。
我将代码添加到 jsfiddle:https://jsfiddle.net/Lpw0726j/
在那里我取消了 div 的注释。
function getFirstDay(theYear, theMonth) {
var firstDate = new Date(theYear, theMonth, 1)
return firstDate.getDay()
}
var getDaysInMonth = function(month, year) {
return new Date(year, month, 0).getDate();
}
$(function() {
var firstDay = getFirstDay(2018, 2);
var howMany = getDaysInMonth(2, 2018);
var dayCounter = 1;
var done = false;
var weekCounter = 0;
while (!done) {
weekCounter++;
week = "week" + weekCounter;
jQuery('<div/>', {
id: week
}).appendTo('.container');
for (var i = 0; i < 7; i++) {
if ($(week).siblings().length == 1 && i < firstDay) {
newC.innerHTML = ""
jQuery('<div/>', {
id: week,
class: 'col border',
text: "x"
}).appendTo('#week' + weekCounter);
continue
}
if (dayCounter == howMany) {
// no more rows after this one
done = true
}
if (dayCounter <= howMany) {
dayCounter++;
jQuery('<div/>', {
//id: week,
class: 'col border',
text: dayCounter
}).addClass('col border').appendTo('#week' + weekCounter);
} else {
}
}
}
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<h1>Month</h1>
</div>最佳答案
我试着遵循这个模式，我相信你在 while lopp 开始时添加周 row 时错过了 addClass :
week = "week" + weekCounter;
jQuery('<div/>', {
id: week
}).addClass('row').appendTo('.container');
function getFirstDay(theYear, theMonth) {
var firstDate = new Date(theYear, theMonth, 1)
return firstDate.getDay()
}
var getDaysInMonth = function (month, year) {
return new Date(year, month, 0).getDate();
}
$(function () {
var firstDay = getFirstDay(2018, 2);
var howMany = getDaysInMonth(2, 2018);
var dayCounter = 1;
var done = false;
var weekCounter = 0;
while (!done) {
weekCounter++;
week = "week" + weekCounter;
jQuery('<div/>', {
id: week
}).addClass('row').appendTo('.container');
for (var i = 0; i < 7; i++) {
if ($(week).siblings().length == 1 && i < firstDay) {
newC.innerHTML = ""
jQuery('<div/>', {
id: week,
class: 'col border',
text: "x"
}).appendTo('#week' + weekCounter);
continue
}
if (dayCounter == howMany) {
// no more rows after this one
done = true
}
if (dayCounter <= howMany) {
dayCounter++;
jQuery('<div/>', {
//id: week,
class: 'col border',
text: dayCounter
}).addClass('col border').appendTo('#week' + weekCounter);
} else {
}
}
}
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Calendar</title>
</head>
<body>
<div class="container">
<h1>Month</h1>
<div class="row">
<div class="col border ">Mon</div>
<div class="col border">Tue</div>
<div class="col border">Wen</div>
<div class="col border">Thu</div>
<div class="col border">Fri</div>
<div class="col border">Sat</div>
<div class="col border">Sun</div>
</div>
<div class="row aa" style="height: 100px;">
<div class="col border">1</div>
<div class="col border">2</div>
<div class="col border">3</div>
<div class="col border">4</div>
<div class="col border">5</div>
<div class="col border">6</div>
<div class="col border">7</div>
</div>
</div>
</body>
</html>关于jquery - 如何在新的动态元素上应用 bootstrap css？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49503821/