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

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 に答える