随着jQuery的事件代表团（http://learn.jquery.com/events/event-delegation），我能够有自动连接到其被添加到UL LI元素的事件，如在后续代码：如何将一个类自动应用于UL中的所有新LI元素？

但是我怎么有风格自动添加？

<html> 
<head> 
    <title>test</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script> 
    $(function() { 
     $("ul#list").append('<li>added before</li>'); 

     //assures that any new LI added to LIST will have this click event 
     $("ul#list").on("click","li", function() { 
      $(this).addClass("selected"); 
     }); 

     //how to also assure that any LI added to LIST will have this style 
     $("ul#list li").addClass("original"); 

     $("ul#list").append('<li>added after</li>'); 
    }); 
    </script> 
    <style type="text/css"> 
     li.original { 
      color: red; 
      cursor: pointer; 
     } 
     li.selected { 
      color:green; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <ul id="list"> 
      <li>one</li> 
      <li>two</li> 
      <li>three</li> 
      <li>four</li> 
     </ul> 
    </div> 
</body>

来源

2013-09-05 Edward Tanguay

.clone（true，true）复制数据（样式，属性等）和事件。 – Virus721

事件处理程序不会自动绑定到添加的元素。相反，单个处理程序绑定到祖先元素（或“文档”本身），并且该事件将从添加的元素直到祖先。没有这样的机制来动态地暴露类和样式。 –

添加类

您可以在类.addClass()

$("ul#list").append($('<li>added after</li>').addClass("original"));

添加到新创建的元素或者只是手工写它，当你创建元素：

$("ul#list").append('<li class="original">added after</li>');

jsFiddleDemo

替代：使CSS选择器更普遍

您也可以使用original类作为UL内的所有列表项的默认类。

li { 
    color: red; 
    cursor: pointer; 
} 
li.selected { 
    color:green; 
}

jsFiddleDemo

来源

2013-09-05 13:26:21 Itay

保持简单。对<ul>应用一个类并根据该类编写您的CSS，而不依赖<li>上的任何特定类。例如：

ul.someClass > li { 
    color: red; 
    cursor: pointer; 
}

无需额外的JavaScript。

来源

2013-09-05 13:32:30

是的，我可以做到这一点，但是我的类的“颜色”属性并没有覆盖原始值：http://jsfiddle.net/3eYyD/ –

如何将一个类自动应用于UL中的所有新LI元素？

回答

添加类

替代：使CSS选择器更普遍

相关问题