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.jsli要素をテンプレート化するために使用されています。liバインディングが発生する前に要素が作成さ.on()れ、「静的」として扱われるため、これだけでは問題ではありませんでした。

キラーはko.computed()ノックアウト モデルのプロパティでした。プロパティは、コレクションをあちこちにリロードします。コレクションがリロードされた瞬間から、アイテムの足場liがやり直され、すべてが.on()壊れます。

于 2012-07-18T21:25:16.387 に答える