0

次のように、Dom 要素が初期化されるたびに発生するイベントが必要です。

HTML

<div id="container">
    <div id="data">data!</div>
</div>

<div id="clickme">Click me!</div>​

Javascript

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data '+i+'</div>');
        i++;
    });

    // this event gets called only the first time #data element is ready
    // I want it to be called each time #data comes into being
    $('#data').ready(function() {
        alert('element data ready!');
    });
});

私はもう試した：

// doesn't work
$('#data').live('ready', function() {
    alert('element data ready (live)');
});

編集： ajaxによって挿入された要素に対してそれを行うことに興味があります。例えば：

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);
  });

  // this function operates on elements returned by the ajax call, so they are not available at this point.
  myFunction();

  // so I'd better call myFunction() when the ajax data is inserted
});

ここでフィドル：http://jsfiddle.net/nf8CP/

4

4 に答える 4

2

更新された質問については、関数をコールバックに移動するだけで完了です。

$.post('/myaction/', {
     param: 'value'
  },
  function(data) {
      $('#someContainer').replaceWith(data);

      myFunction(); // Call it right here.
  });

 // myFunction();  // Not here!!!

});

DOM Mutation イベントがありますが、それらは非推奨であり、完全なブラウザ サポートはないと思います。

プラグインもありlivequeryますが、本当にやり過ぎです。

ハンドラーは、.ready()個々の要素の読み込みイベントを処理しません。DOM ロード イベントのみ。これら 3 つの例はすべて同じ動作をします。

  • $(document).ready(...
  • $('document').ready(...
  • $("#data").ready(...
  • $().ready(...

違いはありません。に渡された引数$は無視されます。

適切な解決策は、要素を作成するときに必要なコードを呼び出すことです。

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data '+i+'</div>');
        dataReady();
        i++;
    });

    function dataReady() {
        alert('element data ready!');
    }
});

また、あなたの例を考えると#data、要素を.html().

于 2012-10-12T16:19:06.207 に答える
1

使用できますDOMNodeInserted：

$(document).on('DOMNodeInserted', function() {
    alert('element data ready (live)');
});

ノードが DOM に追加されるたびに起動されます。

次のように、このイベントをトリガーするノードをフィルタリングすることもできます。

$(document).on('DOMNodeInserted', '#data', function() {
    ...
}

dataの ID を持つノードが追加された場合にのみトリガーされるようになりました。

于 2012-10-12T16:25:27.400 に答える
1

ready(より正確には DOMContentLoaded ) は、ページが完全に解析されたときに 1 回だけ起動します。ここでやりたいことをきれいに行う方法はないため、イベント ハンドラーを手動でインストールする必要があります。(DOM ミューテーション イベントがありますが、それらは非常にうるさいため、ページはそれらを処理しようとして自分自身を食べてしまいます。自分が何をしているのかを本当に理解していない限り、一般的には悪い考えです)。

ただし、ここで本当に必要なのはイベントの委任だと思います。準備完了関数が呼び出されると、既存のノードが DOM から削除されるため、#containerではなくにイベントをインストールする必要があります。#data#data

例えば：

$('#container').on('click', '#data', function() {
  alert('#data element was clicked!');
});

これが行うことは、セレクターを使用して子要素から発生する (またはバブリングする) イベント#containerをリッスンするハンドラー (変更されない) をインストールすることです。これは、 の内容を置き換え続けても、その内容に新しいイベント ハンドラーをインストールする必要がないことを意味します。click#data#container

于 2012-10-12T16:22:17.370 に答える
1

.ready をボタン クリックの中に入れてみませんか? クリックするたびに準備ができているかどうかを確認できます。

$(function() {
    var i = 0;
    $('#clickme').click(function() {
        $('#container').html('<div id="data">data ' + i + '</div>');
        i++;
        $('#data').ready(function() {
            alert('element data ready!');
        });
    });
});​
于 2012-10-12T16:32:34.223 に答える