jQuery 附加函数正在附加没有 CSS 样式的 div答案

【问题标题】：jQuery append functions is appending div without css stylejQuery 附加函数正在附加没有 CSS 样式的 div
【发布时间】：2015-11-17 16:57:25
【问题描述】：

我尝试使用 jQuerys 附加功能制作信息提要。我的问题是我创建的 div 比网站的初始设置晚得多，这导致我的 div 的 css 样式未加载。

我试图找到一个解决方案，发现很多人遇到了同样的问题，并通过对父元素的 .trigger('create') 调用来修复它。但它不起作用。这是我创建和附加 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');
    }

【问题讨论】：

没有任何事件称为create，除非你使用一些plugins
@GuruprasadRao 你的意思是 plugins jQuery 和 jQuery Mobile？
我认为您的 javascript 失败了，您没有分号，请检查您的控制台是否有错误
你可以包含一个实时的 sn-p 或使用 JSfiddle 来做到这一点。
是的.. jquery Mobile 可能有，但不确定！但是你能看到console errors吗，因为据我所知，CSS 不应该对动态添加的元素产生影响！

标签： javascript jquery html css append

【解决方案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 类。

我想你想要一个 alternate 行背景样式。如果是这样，您可以通过使用 even 或 odd 过滤器指定 :nth-child() 将其添加到您的 CSS：

.informationCriteriaListItem:nth-child(even){
     background-color: rgba(71, 126, 209, 0.1);
}

JSfiddle Demo

注意：你可以省略.trigger('create')，因为它没有任何作用，因为create既不是一个内置的JS事件，也不是一个自定义的事件由你。

【讨论】：