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) { });

但不幸的是，内容#parent是使用 AJAX 异步加载的，并且文档中.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/

但是，您的第三次测试

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

确实做某事 - 它在默认情况下在 DOM 上传播时触发事件unknown_id。阻止这种情况的唯一方法是处理所有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 回答