jQuery append functions is appending div without css style

Question

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');
    }

There isn't any event called create unless you use some plugins — Guruprasad J Rao
– Guruprasad J Rao, Commented Aug 24, 2015 at 10:00
@GuruprasadRao Do you mean with plugins jQuery and jQuery Mobile? — nikaam
– nikaam, Commented Aug 24, 2015 at 10:01
i think your javascript is failing, you do not have semi-colons, check your console for errors — Luthando Ntsekwa
– Luthando Ntsekwa, Commented Aug 24, 2015 at 10:02
Yes.. jquery Mobile might have, not sure though! But can you see any console errors because as per my knowledge, CSS shouldn't get effected for dynamically added elements! — Guruprasad J Rao
– Guruprasad J Rao, Commented Aug 24, 2015 at 10:03

Ahmad Baktash Hayeri · Accepted Answer · 2015-08-24 10:57:49Z

1

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.

edited Aug 24, 2015 at 10:57

answered Aug 24, 2015 at 10:47

Ahmad Baktash Hayeri

5,9004 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery append functions is appending div without css style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related