動的に追加されたオブジェクトは、JavaScriptでスタイルを取得しません

Question

動的に追加されたオブジェクトは、スタイル全体を取り上げません。 私はこれらのHTMLオブジェクトを持っている：

<div id="cssmenu"> 
    <ul id="buttonsDiv"> 
    </ul> 
</div> 

私はいくつかのli要素追加してい：

for (var i = 0; i < numOfDays; i++) { 
    let j=i;   
    var newButton = $("<li class='active has-sub'><a href='#'><span> Day " + (i + 1) + "</span></a><ul id=button" + (i + 1) + "></ul></li>"); 
    $("#buttonsDiv").append(newButton); 
} 

を、一定のオブジェクトをクリックした後、私は、サブメニュー項目を挿入したいと思います：

function addEvents(attraction) 
{ 
    var newButton = $("<li><a href='#'><span>"+ attraction+ "</span></a></li>"); 
    var ulChildren = document.getElementById('buttonsDiv').children; 
    var childrenLength = ulChildren.length; 

    for(var i = 0; i < childrenLength; i++){ 
    if(ulChildren[i].children[1].id == day){ 
     $(ulChildren[i].children[1]).append(newButton); 
    } 
    } 
} 

これで、Web上の要素（「追加」されている）を「検査」するときに、挿入が正常に機能しています。 しかし、何らかの理由で正しいスタイルが得られません。オブジェクトをハードコーディングしているときに、目的の効果が得られます。 新しい要素を認識していないDOMと関連がありますか？

誰でも正しい方向に向けることができますか？

EDIT

： これは私のCSSファイルへのリンクです：

http://triprecommendation.azurewebsites.net/project/buttons_styles.css

CSS：

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu { 
    width: 200px; 
    font-family: Helvetica, Arial, sans-serif; 
    color: #ffffff; 
} 
#cssmenu ul ul { 
    display: none; 
} 
.align-right { 
    float: right; 
} 
#cssmenu > ul > li > a { 
    padding: 15px 20px; 
    border-left: 1px solid #1682ba; 
    border-right: 1px solid #1682ba; 
    border-top: 1px solid #1682ba; 
    cursor: pointer; 
    z-index: 2; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #ffffff; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); 
    background: #36aae7; 
    background: -webkit-linear-gradient(#36aae7, #1fa0e4); 
    background: -moz-linear-gradient(#36aae7, #1fa0e4); 
    background: -o-linear-gradient(#36aae7, #1fa0e4); 
    background: -ms-linear-gradient(#36aae7, #1fa0e4); 
    background: linear-gradient(#36aae7, #1fa0e4); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); 
} 
#cssmenu > ul > li > a:hover, 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li.open > a { 
    color: #eeeeee; 
    background: #1fa0e4; 
    background: -webkit-linear-gradient(#1fa0e4, #1992d1); 
    background: -moz-linear-gradient(#1fa0e4, #1992d1); 
    background: -o-linear-gradient(#1fa0e4, #1992d1); 
    background: -ms-linear-gradient(#1fa0e4, #1992d1); 
    background: linear-gradient(#1fa0e4, #1992d1); 
} 
#cssmenu > ul > li.open > a { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15); 
    border-bottom: 1px solid #1682ba; 
} 
#cssmenu > ul > li:last-child > a, 
#cssmenu > ul > li.last > a { 
    border-bottom: 1px solid #1682ba; 
} 
.holder { 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
.holder::after, 
.holder::before { 
    display: block; 
    position: absolute; 
    content: ""; 
    width: 6px; 
    height: 6px; 
    right: 20px; 
    z-index: 10; 
    -webkit-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -ms-transform: rotate(-135deg); 
    -o-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 
.holder::after { 
    top: 17px; 
    border-top: 2px solid #ffffff; 
    border-left: 2px solid #ffffff; 
} 
#cssmenu > ul > li > a:hover > span::after, 
#cssmenu > ul > li.active > a > span::after, 
#cssmenu > ul > li.open > a > span::after { 
    border-color: #eeeeee; 
} 
.holder::before { 
    top: 18px; 
    border-top: 2px solid; 
    border-left: 2px solid; 
    border-top-color: inherit; 
    border-left-color: inherit; 
} 
#cssmenu ul ul li a { 
    cursor: pointer; 
    border-bottom: 1px solid #32373e; 
    border-left: 1px solid #32373e; 
    border-right: 1px solid #32373e; 
    padding: 10px 20px; 
    z-index: 1; 
    text-decoration: none; 
    font-size: 13px; 
    color: #eeeeee; 
    background: #49505a; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
#cssmenu ul ul li:hover > a, 
#cssmenu ul ul li.open > a, 
#cssmenu ul ul li.active > a { 
    background: #424852; 
    color: #ffffff; 
} 
#cssmenu ul ul li:first-child > a { 
    box-shadow: none; 
} 
#cssmenu ul ul ul li:first-child > a { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
#cssmenu ul ul ul li a { 
    padding-left: 30px; 
} 
#cssmenu > ul > li > ul > li:last-child > a, 
#cssmenu > ul > li > ul > li.last > a { 
    border-bottom: 0; 
} 
#cssmenu > ul > li > ul > li.open:last-child > a, 
#cssmenu > ul > li > ul > li.last.open > a { 
    border-bottom: 1px solid #32373e; 
} 
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { 
    border-bottom: 0; 
} 
#cssmenu ul ul li.has-sub > a::after { 
    display: block; 
    position: absolute; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    right: 20px; 
    z-index: 10; 
    top: 11.5px; 
    border-top: 2px solid #eeeeee; 
    border-left: 2px solid #eeeeee; 
    -webkit-transform: rotate(-135deg); 
    -moz-transform: rotate(-135deg); 
    -ms-transform: rotate(-135deg); 
    -o-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 
#cssmenu ul ul li.active > a::after, 
#cssmenu ul ul li.open > a::after, 
#cssmenu ul ul li > a:hover::after { 
    border-color: #ffffff; 
} 

手動作業例：

<div id='cssmenu'> 
<ul> <!-- buttonsDiv--> 
    <li><a href='#'><span>Home</span></a></li> 
    <li class='active has-sub'><a href='#'><span>Products</span></a> 
     <ul> 
     <li><a href='#'><span>Product 1</span></a></li> 
     <li><a href='#'><span>Product 2</span></a></li> 
     <li><a href='#'><span>Pro 2</span></a></li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='active has-sub'><a href='#'><span>Contact</span></a> 
     <ul> 
     <li><a href='#'><span>Product 1</span></a></li> 

     </ul> 
    </li> 
</ul> 
</div> 

Answer 1

が働いて、それを手に入れました！

CSSに問題はありませんでした。

私は、メニューのボタンのクリックリスナーイベントを持つ別のファイルを持っています。 何らかの理由で、動的に追加されたボタンをクリックした後でイベントを起動しませんでした。だから私はそれぞれの創造時にイベントを追加し、それを解決しました！