CSS规则不适用于动态生成的元素 [英] CSS rules not being applied to dynamically generated elements
本文介绍了CSS规则不适用于动态生成的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有动态创建的框，它应该出现在点击。它工作正常，但CSS样式表不选择动态元素。请参阅msg_head。该框由msg_head，msg_body和msg_footer组成。
Thanks。
I have dynamic created box, which should appear on click. It works ok, but css style sheet is not picking dynamic elements. Please see msg_head. The box consists of msg_head, msg_body and msg_footer. Thanks.
JS
JS
var parent = document.getElementById('ft');
var mbox = document.createElement('div');
mbox.id='mb';
mbox.className='msg_box';
var mhead = document.createElement('div');
var mx = document.createElement('div');
mhead.id='bb';
mhead.className='msg_head';
mx.id='x'
mx.className='close';
var mbody = document.createElement('div');
mbody.className = 'msg_body';
var mfoot=document.createElement('div');
mfoot.className='msg_footer';
var mheadall=mhead.appendChild(mx);
mbox.appendChild(mhead).appendChild(mx);
mbox.appendChild(mbody);
mbox.appendChild(mfoot);
parent.appendChild(mbox);
var tt = $(this).text();
var dd = $(this).attr("id");
$("#bb").text(tt);
$("#bb").attr("id",dd);
});
})
CSS
.close {
cursor:pointer;
position:absolute;
}
.leftblock {
position:relative;
}
.msg_box {
display:inline-block;
position:relative;
bottom:-5px;
height:200px;
width:250px;
background:white;
border-radius:5px 5px 0px 0px;
float:right;
margin-right:35px;
}
.msg_head {
background:#3498db;
width:250px;
color:white;
padding:15px;
font-weight:bold;
cursor:pointer;
border-radius:5px 5px 0px 0px;
}
.msg_body {
background:white;
height:200px;
width:250px;
font-size:12px;
padding:15px;
overflow:auto;
overflow-x: hidden;
}
.msg_input {
width:280px;
border: 1px solid white;
border-top:1px solid #DDDDDD;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nameid {
cursor: pointer;
position:relative;
padding:5px 10px;
}
.footer {
position:fixed;
left:20px;
bottom:0;
width:84%;
height:342px;
background:yellow;
border-radius:5px 5px 0px 0px;
overflow:hidden;
overflow-y:hidden;
}
HTML（带PHP元素）
</html>
<body>
<div class="container">
<div class="header">
</div>
<div class="leftblock">
</div>
<div class="chat_box" id="cb">
<div class="chat_head">Members</div>
<div class="chat_body">
<?php
for($i=1;$usernamee=mysqli_fetch_assoc($records); $i++)
{
echo "<div class='nameid' id='$i'
<b>".$usernamee['username']."</br>"."</b></div>";
}
?>
</div>
</div>
<div id="ft" class="footer">
</div>
</div>
</body>
</html>
推荐答案
$(document).on("click", '.nameid', function(e) {
e.preventDefault(e);
var parent = document.getElementById('ft');
var mbox = document.createElement('div');
mbox.id = 'mb';
mbox.className = 'msg_box';
var mhead = document.createElement('div');
var mx = document.createElement('div');
mhead.id = 'bb';
mhead.className = 'msg_head';
mx.id = 'x'
mx.className = 'close';
var mbody = document.createElement('div');
mbody.className = 'msg_body';
var mfoot = document.createElement('div');
mfoot.className = 'msg_footer';
var mheadall = mhead.appendChild(mx);
mbox.appendChild(mhead).appendChild(mx);
mbox.appendChild(mbody);
mbox.appendChild(mfoot);
parent.appendChild(mbox);
var tt = $(this).text();
var dd = $(this).attr("id");
$("#bb").text(tt);
$("#bb").attr("id", dd);
});
这篇关于CSS规则不适用于动态生成的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
