0

jQuery 1.7.1 を使用しており、非推奨の live() 関数を削除した後にアップグレードする予定です。live() と on() の違いについて、ここや他の場所で多くの質問を読んでいます。ただし、特定のケースで on() がイベントリスナーバインディングの特定の (静的) 要素を取得できない理由がわかりません。ドキュメントやその他の場所によると、「ドキュメント」はすべての場合に機能しますが、イベント ターゲットのできるだけ近くにバインドすることが理想的です。

まず、DOM を変更していません。ほとんどの質問で共通の問題であった要素を追加または削除していません。関係者全員がオンロードしています。

次に、これは HTML の基本的な (疑似コード!) バージョンです。

<div.container>
    ...
    <ul>
        <li>
            <div.a_static_parent>
                <form method="post" action="call_a_python_func">...
                    <input.a_static_child>
                    <submit /> ...</form>
                 ...non-form stuff...
            </div>
        </li>
        ...x however many items...
    </ul>
</div>

私たちのコードが実際に行っていたのは、2 つの値が同じか異なるかをチェックし、それに応じて送信ボタンを無効にするかどうかを設定することでした (色を変更したり、「FOO!」を警告したりすることもできますが、同じ問題です)。これは POST-REDIRECT-GET ではなく、POST 専用のフォームです。ページの更新はありません。後ろの値を更新しているだけです。

live() を使用した古い動作中の jQuery コード:

$('.a_static_child').live('change blur',  function() {
    //alert('FOO!'); and other non-DOM-changing things      
});

on() を使用した、ページ読み込みごとに機能する新しい jQuery コード:

$('.a_static_parent').on('change blur', '.a_static_child', function() {
    //alert('FOO!'); and other non-DOM-changing things      
});

以下に関係なく、常に機能します。

$(document).on('change blur', '.a_static_child', function() {
    //alert('FOO!'); and other non-DOM-changing things      
});

中間のケースでは、送信ボタンを押すまでイベントが発生します。その後、live() ではなく on() を使用すると、ページを更新するまで、そのフォームでそれ以上のイベントは発生しません (これはページ上の個々のフォームに当てはまります)。ハンドラーを .container または document に移動するとこれが修正されますが、フォームの送信では DOM がまったく変更されないため、なぜそんなに遠くに移動する必要があるのか​​ わかりません。

イベントを実際のターゲットに近づけたかったのです。.a_static_child は常に .a_static_parent にありますが、常に .container にあるとは限りません。このフォームはダイアログやフレームなどにも表示されるためです。

実際にそうである場合、誰かが on() を使用するときに送信を押すとイベントがオフになる方法を説明できますか? または何が起こっていますか？必要に応じてさらにコードを投稿できますが、基本に固執することを望んでいました.

4

1 に答える 1

1

私はちょうどあなたのコードを複製し、実際に動作させたので、それは外部の問題に違いありません. これがあなたの作業コードです: http://jsfiddle.net/MGrwb/1/

<div>   
    <ul>
        <li>
            <div id="a_static_parent">
                <form method="post">
                    <input id="a_static_child" />
                    <button id="testButton">Test</button>
                 </form>
            </div>
        </li>
    </ul>
</div>

$(document).on('change, blur', '#a_static_child', function() {
    alert('FOO!');// and other non-DOM-changing things      
});

$('#testButton').click(function(e) {
   $('form').submit();
});

$('form').submit(function (evt) {
    evt.preventDefault();  
});
于 2013-04-12T09:26:08.360 に答える