我尝试使用 jQuerys append 功能制作信息提要。我的问题是我创建一个 div 的时间比网站的初始设置晚得多,这导致我的 div 的 css 样式没有加载。
我试图找到一个解决方案,看到很多人遇到同样的问题并通过对父元素调用 .trigger('create') 来修复它。但它不起作用。这是我创建和 append div 的函数。
function createCriteriaListItem(name) {
var listItemImage = "<div class='listItemRoundElement listItemImage'> </div>"
var listItemOuterImage = "<div class='listItem listItemOuter'>" + listItemImage + "</div>"
//List Item Name
var listItemName = "<div class='listItemName'>" + name + "</div>"
var lisItemInnerName = "<div class='listItem listItemInner'>" + listItemName + "</div>"
//List Item Select Button
var listItemSelectButtonAdd = "<div class='addHoriontal'> </div> <div class='addVertical'> </div>"
var listItemSelectButton = "<div class='listItemRoundElement listItemSelectButton'>" + listItemSelectButtonAdd + "</div>"
var listItemOuterSelectButton = "<div class='listItem listItemOuter'>" + listItemSelectButton + "</div>"
//List Item
var informationCriteriaListItemContent = listItemOuterImage + lisItemInnerName + listItemOuterSelectButton
var informationCriteriaListItem = "<div id=" + name + " class='informationCriteriaListItem'>" + informationCriteriaListItemContent + " </div>"
$("#informationCriteriaList").append(informationCriteriaListItem).trigger('create');
}
最佳答案
如您提供的 JSFiddle 中所述并检查元素,CSS IS 实际上已加载。
要使 inner 子节点受到影响,您需要在 CSS 中做的唯一一件事是将 height
属性添加到 informationCriteriaListItem
类。
.informationCriteriaListItem
{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
height: 24px;
width: calc(100% - 2px);
}
与此同时,您还没有在任何行上添加 listItemImage
类。
我想您想要一个备用 行背景样式。如果是这样,您可以通过使用 even
或 odd
指定 :nth-child()
将其添加到您的 CSS过滤器:
.informationCriteriaListItem:nth-child(even){
background-color: rgba(71, 126, 209, 0.1);
}
注意:您可以省略 .trigger('create')
因为它没有任何效果,因为 create
既不是内置的 JS 事件,也不是您定义的自定义事件。
关于javascript - jQuery 追加函数正在追加没有 css 样式的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32179419/