ajax使用append()后样式无效,jquery.ajax使用字符串拼接后内联css样式失效
时间: 2024-03-23 17:36:45 浏览: 235
解决jQuery使用append添加的元素事件无效的问题
如果使用 jQuery 的 append() 方法添加 HTML 代码后出现样式失效的问题,可能是因为添加的元素是动态生成的,而样式表已经被加载完成,浏览器无法将样式应用到动态生成的元素上。
解决这个问题的方法是,可以使用 jQuery 的 on() 方法来代替 append() 方法,将 HTML 代码添加到指定的 DOM 元素中。这样添加的元素会被浏览器正确解析,样式也会生效。具体的代码如下:
```javascript
$('body').on('DOMNodeInserted', '.myClass', function() {
$(this).css('color', 'red');
});
```
这段代码中,我们使用 on() 方法来监听 .myClass 元素的插入事件,当这个元素被添加到 body 中时,就会触发 DOMNodeInserted 事件,然后我们再将样式应用到这个元素上。
如果需要添加多个样式,可以将样式写成 CSS 类,然后使用 addClass() 方法将这个类添加到元素上。如下代码所示:
```javascript
.myClass {
color: red;
font-size: 16px;
}
$('body').on('DOMNodeInserted', '.myClass', function() {
$(this).addClass('myClass');
});
```
这样添加的元素样式就可以生效了。
阅读全文