0

使用 jQuery 的事件委托 ( http://learn.jquery.com/events/event-delegation )，我可以将事件自动附加到添加到 UL 的 LI 元素上，如下面的代码所示：

http://jsfiddle.net/Betum

但是我如何自动添加样式呢？

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

4

2 回答 2

2

把事情简单化。将单个类应用于s<ul>并基于此编写您的 CSS，而不依赖于<li>s 上的任何特定类。例如：

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

不需要额外的 JavaScript。

于 2013-09-05T13:32:30.413 回答
0

添加类

您可以将类添加到新创建的元素中.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-05T13:26:21.230 回答