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

現在，當我「檢查」網絡上的元素時（他們正在添加），插入按預期工作。 但由於某種原因，它沒有得到正確的樣式，當我對對象進行硬編碼時，我得到了期望的效果。 它與DOM沒有識別我的新元素有關嗎？

任何人都可以指向正確的方向嗎？

編輯： 這是我的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的問題。

我有另一個文件，其菜單按鈕具有點擊偵聽器事件。 由於某種原因，它沒有啓動事件後點擊動態添加按鈕。所以我在創建時爲每個事件添加了一個事件並解決了它！