1

特定のクラスの子要素の最初の要素でイベントを動的にバインドする必要がある特別なシナリオがあります。たとえば、私は1つのdivを持っています：

<div></div>

次に、クリックイベントを最初の'.button'子要素にバインドします。

$('div').on('click', '.button:first', function (event) {
    alert($(event.target).text());
});

そして、子要素は後で作成されます。

$('div').append(
    "<span class='button'>Button1</span>" +
    "<span class='button'>Button2</span>");

この場合、Button1をクリックすると、アラートウィンドウがポップアップ表示されます。Button2はしません。それは正しいです...divの上に1つの'.button'要素を配置するまで。

<span class='button'>Outer Button</span>
<div></div>

次に、Button1をクリックしても、アラートウィンドウはトリガーされません。コードはここにあります：http：//jsfiddle.net/D2H92/

これが常に機能するとは限らない理由と、それを解決する方法について何か考えはありますか？乾杯！

4

3 に答える 3

3

:first現在のセレクターに一致する最初の要素のみを取得します。この場合、最初の要素はに一致し.buttonます。<div>イベントは要素にバインドされていますが、それによってセレクターdivがターゲットのそれだけを見るようになるわけではありません。

:first-child代わりに使用してみてください。

于 2013-03-19T05:08:09.157 に答える
2

jQueryの上位バージョンはこれを処理します。 ここで修正されたバグを参照してください。

チェックしてください（jQueryのバージョンを1.8.3に変更して）。

// ..same code
于 2013-03-19T05:17:16.527 に答える
1

：firstまたは：last疑似プロパティを使用する場合、jQuery1.8.3以降でのみ機能します。div内のすべてのボタンが必要な場合（ボタンクラスの後の：firstを省略して）、以前のバージョンのjQueryで機能します。したがって、jsfiddleの例では、jQuery 1.7.2を選択しましたが、少なくともバージョン1.8.3に切り替える必要があります。

それがあなたの質問に答えたことを願っています。

于 2013-03-19T05:20:44.657 に答える