使用 jQuery .on() 绑定委托事件时，直接子项的正确选择器是什么?

Question

我正在尝试使用 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) { });

但不幸的是，#parent的内容是用 AJAX 异步加载的，.on()的文档说当调用.on()（直接事件）时元素应该存在。

委托事件的优点是，它们可以处理以后添加到文档中的后代元素中的事件。

---

摆弄后更新。似乎>不适用于jQuery 1.7.2，但1.8以后它可以使用。请参阅下面的接受答案：https://stackoverflow.com/a/14480482/769144

Answer 1

我看不出启动选择器的问题，>选择直系后代。

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

现场示例：http://jsfiddle.net/wY89L/1/

但是，您的第三次测试

$('#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/