0

イベントをバインドして、コンテナー要素の子を jQuery に誘導しようとしてい.on()ます。">" でセレクターを開始できないようですが、ここでセレクター文字列を形成する正しい方法は何ですか?

<div id="#parent">
  <div id="#unknown_id"><!-- Event should be run if triggered here -->
     <div id="#another_unknown_id"><!-- But not here --></div>
  </div>
  <div id="#one_more_unknown_id"><!-- Event should be run if triggered here -->
     <div>...</div>
  </div>
</div>

<script type="text/javascript>">
$('#parent').on('custom_event', 'div', function(e) {
    alert('Now triggerer custom_event on #unknown_id');
});

$('#unknown_id').trigger('custom_event'); // This should trigger an alert
$('#one_more_unknown_id').trigger('custom_event'); // ... this should too
$('#another_unknown_id').trigger('custom_event'); // This should NOT do anything
</script>

私はそれをできた

$('#parent > div').on('custom_event', function(e) { });

残念ながら、 のコンテンツは#parentAJAX と非同期でロードされ、 のドキュメントに.on()は、 が呼び出されたときに要素が存在する必要があると記載されてい.on()ます (直接イベント)。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。

いじってから更新。>jQuery 1.7.2 では動作しないようですが、1.8 以降では動作します。以下の受け入れられた回答を参照してください: https://stackoverflow.com/a/14480482/769144

4

1 に答える 1

4

>直接の子孫を選択するためにセレクターを開始する際の問題はわかりません。

$('#parent').on('custom_event', '> div', function(e) {
    alert('Now triggerer custom_event on ' + $(this).attr('id'));
});

実際の例: http://jsfiddle.net/wY89L/1/

しかし、あなたの3回目のテスト

$('#another_unknown_id').trigger('custom_event'); // This should NOT do anything

何かをunknown_id行います -デフォルトで DOM を伝播する際にイベントをトリガーします。これを止める唯一の方法は、すべてのdiv要素でイベントを処理し、イベントが無効であると判断したときにイベントの伝達を停止することです。何かのようなもの：

$('#parent').on('custom_event', 'div', function(e) {
    if($(this).parent().attr('id') != 'parent'){
         e.stopPropagation();
        return;
    }
    alert('Now triggerer custom_event on ' + $(this).attr('id'));
});

実際の例: http://jsfiddle.net/wY89L/3/

于 2013-01-23T13:07:37.610 に答える