jQuery的delegate()函数怎么使用

9か月 ago

桜, 春樹

1 minute

jQueryのdelegate()関数は、選択した要素の子要素にイベントをバインドするために使用されます。つまり、動的に生成された要素にバインドできます。

delegate() 関数の構文は次のとおりです。

$(selector).delegate(childSelector, event, handler);

パラメータの説明を以下に示します。

イベントをバインドする親要素のセレクタです。必須です。
childSelector: イベントをバインドする子要素セレクター(必須)
必須、クリック、マウスオーバーなどのイベントタイプをバインドする必要があります。
ハンドラー: 必須。イベントのトリガー時に実行する関数です。

親要素の子要素にクリックイベントをバインドする delegate() 関数の例を次に示します。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul").delegate("li", "click", function(){
$(this).toggleClass("selected");
});
});
</script>
<style>
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>
</body>
</html>

上述のように、ul要素の子要素liにクリックイベントを割り当て、li要素をクリック時に選択されたスタイルを切り替える。