javascript - CSS 规则未应用于动态生成的元素

我有动态创建的框，它应该在点击时出现。它工作正常，但 css 样式表没有选择动态元素。请参阅 msg_head。该框由 msg_head、msg_body 和 msg_footer 组成。谢谢。

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


});

fiddle link

关于javascript - CSS 规则未应用于动态生成的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44104927/

javascript - CSS 规则未应用于动态生成的元素

上一篇：jquery - 在 jquery-ui sortable 中的两个列表之间交换列表项

下一篇：javascript - 如何在其中的段落达到 500px 高度后将 div 的高度 (500px) 更改为自动？