js 动态加载html拼接css 失效

Question

在页面上直接写html 标签布局合适的
<div id="videoMain"> <div class="m-video" data-src="../../video/123.mp4">
<a><img src="../../img/uploadImg/123.jpg" alt="无法显示图片" />
<span>遮罩层处处出出错遮罩</span></a>
</div>
<div class="m-video">
<a><img src="../../img/uploadImg/123.jpg" alt="无法显示图片" />
<span>遮罩层处处出出错遮罩</span></a>
</div>
</div>但是用js 动态拼接加上去之后部分样式失效了！！！
<script>
$(function() {
var html = ''; html += '<div class="m-video" data-src="../../video/123.mp4">';
html += '<a><img src="../../img/uploadImg/123.jpg" alt="无法显示图片" />';
html += '<span  >遮罩层处处出出错遮罩</span></a>';
html += '</div>';

$("#videoMain").append(html);
 $("#videoMain").trigger('create');

});
</script>

Answer 1

你是不是用了某个插件。一般的插件都是只在页面加载的初始时对页面上的元素进行处理一次，再这之后添加的元素没有经过插件处理。你可以试试把$(function() {})去掉，让它在插件处理之前添加元素

Answer 2

   可以试试 事件委托。在父节点上操作 百度下jquerq事件委托

Answer 3

你把，样式写在 js 里面吧，每次添加都重新设置下css

Answer 4

(function(){
var html = '';
html += '<div class="m-video" data-src="../../video/123.mp4">\
<a><img src="../../img/uploadImg/123.jpg" alt="无法显示图片" />\
<span  >遮罩层处处出出错遮罩</span></a></div>';
$("#videoMain").append(html);
})();