1

设想

我有一个用户列表，每个列表项中都有一个<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 吗？

4

2 回答 2

3

[编辑]

对于委托事件处理，语法.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();
});
于 2012-07-18T18:24:12.617 回答
0

谢谢

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

进一步说明

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

杀手是ko.computed()淘汰赛模型的财产。该属性在此处/那里重新加载集合。从重新加载收藏的那一刻起，li项目的脚手架就被重做，所有的.on()休息。

于 2012-07-18T21:25:16.387 回答