廃止 - jquery イベントハンドラ




jquery.live on loadイベント (6)

.live()関数を使用してajax経由でロードされる要素に作用する方法が必要です。

例えば、divはajax .load()によってロードされます。

<div id="mydiv"></div>

通常はclickイベントで.live()を実行しますが、 .live()からこの新しいdivがユーザーからの明示的なアクション/イベントなしでロードされたことを.live()に伝える方法を知る必要があります。

このコードは機能しませんが、私は次のようなことをしたい:

mydiv = $("#mydiv");

mydiv.live("mydiv.length > 0", function() {
       // do something
});

「mydiv.length」は、典型的な「クリック」または他のイベントの代替物です。


#mydivは何を作成しますか? あなたは単に#mydivを作成する関数のすぐ上に// doSomethingを投げることができます。

$.post("myURL.html", function(data){
  $("#mydiv").html(data);
  //doSomething

#mydivは結局自分自身を作成し​​ません。 しかし、あなたは#mydivを作成していますが、同じ機能を使って何か他のことをする必要はありません。


.liveは、jquery 1.3のドキュメントに記載されているように、ready end loadイベントでは動作しません。詳しくは、http://api.jquery.com/live/を参照してください。


.live()を "load"イベントで使用することはできません。 あなたがここで何をしたいのかの非現実的な例を見てください: http://www.jsfiddle.net/S5L6Q/ : http://www.jsfiddle.net/S5L6Q/

1つの方法は、タイマーでポーリングすることです。

var length = $(".mydiv").length;
setInterval(function () {
  if ($(".mydiv").length > length) {
    length = $(".mydiv").length;
    // .. some code
  }
}, 100);

これは1/10秒ごとにチェックされ、いくつか追加されているかどうかを確認します。 これはセレクタの複雑さに応じて非常に高価になるかもしれません。

別のオプションは、長さをチェックし、必要に応じてコードを実行してから、指定されたコールバックを実行できる共通ラッパーを使用して、すべてのAJAX呼び出しをフックすることです。

function myAjax(url, data, callback) {
  function fullCallback(data) {
    if ($(".mydiv").length > 0) {
      //... your code...
    }
    if (callback) {
      callback();
    }
  }
  $.get(url, data, fullCallback);
};

2番目のルートはおそらく最善のルートですが、最初は最も簡単なルートです。



ヤップ、それはまだ少し高価です。 しかし、あなたはこれを試すことができます:

$(document).ready(function(){
    $(document).bind('DOMSubtreeModified', function() {
       if($("#mydiv").length > 0){
         //Here goes your code after div load
       }
    });
});

例えば(上の私のコメントに展開する)これはjQueryのドキュメントからです..

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('#mydiv').html(data);
    alert('Load was performed.');
  }
});

アラートを、実行するコード/実行するアクションに置き換えます





jquery