0

<ul>'独自のsの'.click（）'イベントに関数を追加する方法について少し考えていました<li>。最初のことは簡単です（それは概算です、私は明らかにjqueryプロではありません）。

$(document).ready(
    function () {
        $('.prodli').each().click( //prodli is my class I set on every <li>
            function () {
                //blabla
            }
        );
    }
);

しかし！常にどこかにあるので...これら<li>は別のjqueryスクリプトを介して削除して追加することができます。

したがって、前に書いたスクリプトをこのリストに適用すると、次のようになります。

<ul>
    <li productId="1" class="prodli">Product 1</li>
    <li productId="2" class="prodli">Product 2</li>
    <li productId="3" class="prodli">Product 3</li>
    <li productId="4" class="prodli">Product 4</li>
    <li productId="5" class="prodli">Product 5</li>
    <li productId="6" class="prodli">Product 6</li>
</ul>

他のスクリプトを使用して、リストを次のように更新するとします。

<ul>
    <li productId="455" class="prodli">Product 455</li>
    <li productId="48" class="prodli">Product 48</li>
    <li productId="7" class="prodli">Product 7</li>
</ul>

click()これらの新しい関数に関数を適用するには、最初のスクリプトを再度呼び出す必要があります<li>ね。

よりグローバルな方法でそれを行う方法はありますか？「クラス「prodli」の要素がクリックされるたびに、この関数を適用する」のような意味ですか？<li>または、この特定の<ul>リストのすべてのようなものですか？

どうもありがとう！

4

1 に答える 1

2

クリックイベントを親ul要素（または実際には他の祖先）に委任できます。DOMイベントはツリーをバブルアップする傾向があるため、子孫要素をクリックするとに到達し、ulそこで処理できます。

jQueryは、onそうするためのメソッドを提供します（jQueryの古いバージョンを使用している場合は、delegate代わりに必要になりますon）：

$("ul").on("click", ".prodli", function() {
    //Do stuff
});

これは、ul缶の子が好きなだけ変更できることを意味します。違いはありません。の子孫をクリックするulと、バブルアップしulます。jQueryは、クリックがセレクターに一致する要素（この場合は任意の要素）で発生したかどうかを確認し、発生した場合.prodliはイベントハンドラーを実行します。

于 2012-04-19T10:36:01.263 に答える