CODEWITHSUNDEEP
javascriptjqueryhtmlcssappend
nikaam
nikaam

Reputation: 1

jQuery append functions is appending div without css style

I try to make an information feed with jQuerys append function. My issue is that I'm creating a div much later than the initial setup of the website this causes that the css style for my div isn't loaded.

I tried to find a solution and saw a lot of people having the same issue and fixing it with an .trigger('create') call on an parent element. But it doesn't work. Here is my function creating and appending the 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');
    }

Upvotes: 0

Views: 462

Answers (1)

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

As noted in the JSFiddle you provided and inspecting the elements, the CSS IS in fact loaded. The only thing you need to do in your CSS to make inner children nodes get affected is to add a height property to the informationCriteriaListItem class.

.informationCriteriaListItem
{
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: 24px;
    width: calc(100% - 2px);
}

Meanwhile, you haven't added the listItemImage class on any of the rows.

I suppose you wanted an alternate row background style. If so, you can add this to your CSS by specifying :nth-child() with even or odd filters:

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

JSfiddle Demo

Note: You can omit .trigger('create') as it has no effect whatsoever, since create is neither a built-in JS event, nor a custom one defined by you.

Upvotes: 1

Related Questions