javascript - jQuery 追加函数正在追加没有 css 样式的 div

Question

我尝试使用 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');
    }

Answer 1

如您提供的 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);
}

JSfiddle Demo

注意:您可以省略 .trigger('create') 因为它没有任何效果，因为 create 既不是内置的 JS 事件，也不是您定义的自定义事件。