jQueryのバージョンアップに伴うエラー発生時の対応ガイド

jQuery 1.4.1 → 3.7.1 バージョンアップにともない、旧バージョンで作成されたスクリプトの新バージョン対応方法についてご説明いたします。

・重要な変更項目

- イベントショートカットメソッド（例：`.click()`）や、`.bind()`、`.live()` は非推奨または削除されており、すべて `.on()` / `.off()` を使用する形に統一する必要がございます。  

- 状態の取得や設定には `.attr()` ではなく、`.prop()` をご利用いただくことが推奨されております。  

- Ajaxのコールバック関数（`success` や `error`）は、`.done()` や `.fail()` に置き換えていただく必要があります。  

- `.size()` メソッドは削除されているため、代わりに `.length` をご使用ください。  

 

・非推奨となったイベントショートカット一覧

イベントショートカット	状態	推奨される使用方法
`.click()`	非推奨	`.on("click", handler)`
`.dblclick()`	非推奨	`.on("dblclick", handler)`
`.focus()`	非推奨	`.on("focus", handler)`
`.blur()`	非推奨	`.on("blur", handler)`
`.load()`	削除済	`.on("load", handler)`
`.error()`	削除済	`.on("error", handler)`
`.resize()`	非推奨	`.on("resize", handler)`
`.unload()`	削除済	`.on("unload", handler)`

 

・よくあるエラーになりやすい箇所と修正例

 1. `.attr()` から `.prop()` への変更（状態の取得・設定）

javascript
// 旧コード（チェックボックスのチェック状態取得）
var checked = $("#chk").attr("checked");

// 新コード（推奨）
var checked = $("#chk").prop("checked");

2. `.bind()`, `.unbind()` から `.on()`, `.off()` への統一

javascript
// 旧コード
$("#btn").bind("click", function() { alert("クリックされました"); });

// 新コード
$("#btn").on("click", function() { alert("クリックされました"); });

3. `.live()` の削除に伴う `$(document).on()` への置き換え

javascript
// 旧コード
$("a.link").live("click", function() { alert("リンクがクリックされました"); });

// 新コード
$(document).on("click", "a.link", function() { alert("リンクがクリックされました"); });

4. `.size()` の削除による `.length` への置き換え

`javascript
// 旧コード
var count = $("div").size();

// 新コード
var count = $("div").length;

5. `.load()`, `.error()`, `.unload()` イベントショートカット削除による `.on()` への置き換え

javascript
// 旧コード
$("img").load(function() { console.log("画像が読み込まれました"); });
$("img").error(function() { console.log("画像の読み込みに失敗しました"); });
$(window).unload(function() { console.log("ウィンドウが閉じられます"); });

// 新コード
$("img").on("load", function() { console.log("画像が読み込まれました"); });
$("img").on("error", function() { console.log("画像の読み込みに失敗しました"); });
$(window).on("unload", function() { console.log("ウィンドウが閉じられます"); });

6. Ajaxコールバック関数の廃止に伴う `.done()`, `.fail()`, `.always()` への置き換え

`javascript
// 旧コード
$.ajax({
  url: "test.php",
  success: function(data) { console.log(data); },
  error: function() { alert("エラーが発生しました"); }
});

// 新コード
$.ajax("test.php")
  .done(function(data) { console.log(data); })
  .fail(function() { alert("エラーが発生しました"); });

7. `.andSelf()` の削除に伴う `.addBack()` への置き換え

javascript
// 旧コード
$("p").find("span").andSelf().css("color", "red");

// 新コード
$("p").find("span").addBack().css("color", "red");