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的问题。

我有另一个文件，其菜单按钮具有点击侦听器事件。 由于某种原因，它没有启动事件后点击动态添加按钮。所以我在创建时为每个事件添加了一个事件并解决了它！