はじめに

簡単なモーダルウインドウを実装する際に便利な「jquery.simplemodal.js」というjQueryプラグインがあるのですが、こいつがjQuery3系ではそのまま動かないのでとりあえず動くようにしてみたという話。

背景

数年前に作成されていた「jquery.simplemodal.js」を使ってモーダルウインドウを表示していた画面にて、読み込んでいたjQueryのバージョンが1.5.2とかなり古く、XSS対策などもされていないバージョンということで、セキュリティ上の大きな問題がありました（それ以外にも沢山あるけど）。

とりあえずXSS対策を行うだけなら1.6.3以降のjQueryを使えばいいだけなのですが、既にjQueryの1.x系は新規機能の追加も終了しており、また、今後該当の画面を改修する際に古いjQueryを使っていることがネックにならないかという懸念がありましたので、最新バージョンである3系で動かすことができないかトライしてみることにしました。

まずjQuery1.x系の最終バージョンで動くようにする

http://www.buildinsider.net/web/jqueryref/051
ここを参考に、まず1.x系の最終バージョンで動くように修正。
と言っても、「jquery.simplemodal.js」の最新バージョン（1.4.4）を導入していれば、
「jquery.simplemodal.js」自体に特別な手を入れる必要はありません。

（9/7追記）
jQueryの.browser()がjQuery1.9で廃止された影響で、
simplemodal.jsの最新バージョン以外ではjQuery1.9以降動作しなくなるため。

同じ画面内でjQueryを使っている箇所で修正が必要なところがあれば都度対応します。
上記の記事にもありますが、こちらが参考になるかと。
https://github.com/jquery/jquery-migrate/blob/1.x-stable/warnings.md

修正完了後、1.x系の最新バージョンで動作することを確認。

いよいよjQuery3.x系の最新バージョンで動くようにする

1.x系での最新バージョンで動くことが確認できれば、いよいよ3.x系への対応です。
「jquery-migrate-3.0.0.min.js」をincludeしてみればすぐわかるのですが、
「JQMIGRATE: jQuery.fn.bind() is deprecated」というエラーが表示されます。

これはjQuery 3.x系でbind()がremovedされたことが原因です。
なので、「jquery.simplemodal.js」内の".bind()"と記載されている箇所を".on()"に置き換えます。
独自に手を入れていなければ、これだけで動くはずです。
（少なくともsimplemodal起因の問題はなくなるはず）

（9/7追記）
コメント欄で削除ではなく非推奨になったとご指摘いただきました、
ありがとうございます。ただ、将来的には間違いなく削除されると思うので、
onに置き換えられるなら置き換えておいた方がいいのでしょうね。

試しに一旦onメソッドをbindに戻してみたところ正常に動くように。
最初に確認した環境がnoConflict()を用いて、
jQuery1.x系と2.x系を両方読み込んで無理やり動かしていた環境だったので、
その辺が悪影響を及ぼしていたのかもしれませんね・・・・・・

おわりに

まぁとりあえず当面はこれで何とかなるけど、
「jquery.simplemodal.js」ももう4年くらい更新されてないプラグインですし、
今後のことを考えると他の方法でモーダル実装することを考えたほうがいいのかもしれないですね。

あとjQueryのbind()って名前、今一ピンと来なかったんですが、
on()に置き換わったことで大分直感的にわかりやすくなった印象。