iOS5ではjQueryの$.after()でイベントリスナーが削除されるようになった

はまったのでメモ。jQueryのバージョンは1.6.4。

iOS5になってからSafariもかなりパワーアップされた。
それに関連するかは分からないが、javascriptの挙動が変わってしまっている部分がある。
今回気がついたのはjQueryのafter()およびbefore()の挙動だ。とりあえずサンプルを作ってみた。

サンプル

AとB、CとD、EとFはそれぞれ対になっている。
下の箱をタップするとjQueryのbefore()を使って上の箱と位置を入れ替える。
また、A,C,Eの箱はスワイプするとCの横にメッセージが表示される。
ブラウザで見たときにわかりやすいようにAとBにはクリックもバインドしておいた。

http://jsrun.it/fumito_ito/tXYE

なんの意味があるの?

このサンプル、使用者のiOSのバージョンに応じて挙動が変わってくる。

iOS4の場合、何回でもタップしてスクリプトを実行することができる。
しかし、iOS5の場合は1回タップした時点でイベントリスナーのバインドが解除されてしまい、スクリプトを実行できなくなるのだ。

ちなみにこの現象はtouch~のみで発生するらしく、clickをバインドしているAとBでは何回でもクリックできる。
iOS(というかMobile Safari)のバージョンアップに応じて挙動が変わっている部分はまだまだありそうだ。
すでに気がついているものや、まとめサイトなどがあれば教えて欲しい。