用于动态创建元素的 jQuery CSS()

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3717257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:58:03  来源:igfitidea点击:

jQuery CSS() for dynamically created elements

jquerycsslive

提问by Omar Abid

I'm using jQuery CSS function to style some elements

我正在使用 jQuery CSS 函数来设置一些元素的样式

$element.css(style);

This works, but a part of the elements are created dynamically after the page load. This should be

这有效,但部分元素是在页面加载后动态创建的。这应该是

$element.live ('created',function() {
$(this).css(style);
});

I'm stuck on the created event. Any ideas?

我被困在创建的事件上。有任何想法吗?

回答by Andy E

There's no event for elements created (not universally available, anyway). You could

创建的元素没有事件(无论如何都不是普遍可用的)。你可以

  • Add the rules to a stylesheet so that they are automatically applied to the newly created elements
  • Chain the css()method when you create your elements:

    $('<img id="createdImage" src="some.jpg"/>')
        .appendTo(document.body)
        .css(style);
    
  • Create a new stylesheet dynamically:

    $("<style>").text("#myNewEl { width:20px; height:30px; }").appendTo("head");
    
  • 将规则添加到样式表,以便它们自动应用于新创建的元素
  • 创建元素时链接css()方法:

    $('<img id="createdImage" src="some.jpg"/>')
        .appendTo(document.body)
        .css(style);
    
  • 动态创建一个新的样式表:

    $("<style>").text("#myNewEl { width:20px; height:30px; }").appendTo("head");
    

回答by Matee Gojra

Best Idea is to Define CSS classes. And then Remove and add classes from Dynamic elements as per need

最好的主意是定义 CSS 类。然后根据需要从动态元素中删除和添加类

$(element).addClass("className");
$(element).removeClass("className");

Example:JS Fiddle

示例:JS 小提琴

回答by user2935404

$('head').append('
< style >
.folder { background: url(../icons/Folder_icons/g/f.png) no-repeat left top;} < / style >');