jQuery .on（）没有触发事件处理程序

Question

方案

我有一个用户列表，每个列表项中都有一个<header>和一个<div>包装器 - 它们是兄弟姐妹：

<li class="user">
    <header>
        // ...
    </header>
    <div class="user-wrapper">
        // ...
    </div>
</li>

单击用户div时，我正在切换header包装。

目前有效：

// the handler is called
$('li.user > header').live('click', function () {
    $(this).next('.user-wrapper').toggle();
});

由于live()已被弃用且我使用jQuery 1.7.2，我想使用on()。

什么行不通：

// Direct style
$('li.user > header').on('click', function () {
    $(this).next('.user-wrapper').toggle();
});

// Delegated style
$('li.user').on('click', 'header', function () {
    $(this).next('.user-wrapper').toggle();
});

在on()方案中，未调用匿名处理函数。

问题

首先......为什么on()会窒息？

第二...如果/当它工作时，使用委托样式，我仍然可以像上面一样引用标题的兄弟div吗？

Answer 1

[EDITED]

对于委托事件处理， .on() 的语法为：

// 'element' must be static and an ancestor to 'target'.
$(element).on(eventName, target, handlerFunction);

上面的代理方案应该有效，假设您的li.user标签在绑定时是静态的。

$('li.user').on('click', 'header', function () {
    $(this).next('.user-wrapper').toggle();
});

如果你在jsFiddle中测试它，它会按原样运行。您的li.user元素似乎是动态创建的。

如果动态创建li.user，则使用其他（静态）父选择器。如果您的列表ul始终存在，例如：

// HTML
<ul class="user-list">
  <li class="user">
    <header>
        // ...
    </header>
    <div class="user-wrapper">
        // ...
    </div>
  </li>
</ul>

// JavaScript
$('ul.user-list').on('click', 'li.user > header', function() {
  $(this).next('.user-wrapper').toggle();
});

Answer 2

感谢

非常感谢 @thecodeparadox - 他的回答最好地解释了这个问题并且标记为这样。我在下面的回答只是解释了列表项如何/为何变得动态的细节。

进一步说明

Knockout.js用于模拟li元素。单独这不是问题，因为li元素是在.on()绑定发生之前创建的，并且仍被视为“静态”。

杀手是淘汰模型中的ko.computed()属性。该物业在这里/那里重新加载集合。从重新加载集合的那一刻起，li项目的脚手架就会重做，所有.on()都会中断。