John Resig のきれいな日付を使用して、醜いタイム スタンプを読みやすい時刻指定に置き換えたいと考えています。そこで、次の控えめな html マークアップを使用することを考えました。
<span data-type="prettyDate">25.04.2012 10:16:37</span>
それに応じて、次の Javascript/jQuery を使用して日付をきれいにします。
$(function() {
$('[data-type="prettyDate"]').prettyDate();
}
私の問題は、DOM 準備完了イベントが発生したときにまだ存在しないため、ajax を使用して読み込まれたマークアップを処理する方法がわからないことです。「ajaxed」要素のイベントへの対応は、on ハンドラを使用すると非常に簡単です。しかし、これはイベントではありません。
.prettyDate()各 Ajax 応答が DOM に追加された後に呼び出す必要があります。これを行う簡単な方法は、グローバルcompleteハンドラを で設定することですajaxComplete。
jQuery を使用して、実際にドキュメントに挿入される前に動的コンテンツをターゲットにすることができます。たとえば、次のようになります。
success: function(html) {
var $html = $(html);
$html.find('[data-type="prettyDate"]').prettyDate();
$(somewhere in document).append($html);
}
AJAX 呼び出しのたびに特定のコードを実行する必要があるケースが数多くありました。それが「正しい」ソリューションと見なされるかどうかはわかりませんが、独自のラッパー メソッドを作成し、AJAX リクエストを行う必要があるときはいつでもそれを使用することにしました。通常、次のようになります。
AJAXLoadData: function (url, data, successCallBack) {
$.ajax({
type: "GET",
data: data,
url: url,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Code I want to execute with every AJAX call
// goes here.
// Then trigger the callback function.
if (successCallBack) successCallBack(msg);
},
error: function (msg) {
alert("Server error.");
}
});
}
私の場合、これにより、静的 HTML ファイル用の JavaScript キャッシング システムを作成することが特に便利になりました。
これから最高のパフォーマンスを得るためにやりたいことは、データが ajax コールバックから返されるときに呼び出される関数を用意することです。そうすれば、DOM に追加する前に日付をきれいにすることができます。
既に行われた日付も処理するため、DOM の要素で毎回かなりの日付を呼び出したくありません。
だから、このようなもの。
$.ajax({
url:'someurl',
success: function(data) {
var $content = $(data).find('[data-type="prettyDate"]').prettyDate();
$('#mycontainer').append($content);
}
});
またはあなたが呼び出すヘルパー関数を持っています
function prettify(data) {
return $(data).find('[data-type="prettyDate"]').prettyDate();
}
または、すべてのhtmlコンテンツに対して行われるように、ajax呼び出しにフックすることをお勧めします
このコードを ajax 成功コールバック関数に組み込むことができます。ajax が完了し、ページを更新したら、コードを実行して日付を整形します。
これは の 1 つ.on()です。（昔は、.live()使われていたでしょう。）