ただのにっき

■ Webkitではイベント系の属性をJavaScriptから書き換えられない(の?)

最近まじめにAjaxプログラミングを始めてですね(今ごろかいな)、jQueryで楽ができる時代から始めるとハードル低くていいっすよ、ホント。

で、だいぶ前から自分の浪費っぷりを可視化しないといかんなーと思っていたので、それを題材に「単に使ったお金を記録するだけのWebアプリ」を作ってみている。GETでデータを取ってきて、POSTでデータを投げるのでいい題材。これをiPhone用のビジュアルにすれば、日常的に使えるだろう。たぶん自分にしか実用性がないけど、ソースはgithubにて(→paymemo)。サーバサイドでいまだに「require 'cgi'」とかしてるのをなんとかしろって感じだが。もちろんドキュメントはない。

Firefox上での開発はまったくスムーズでたいした困難もなかったのだが、これを肝心のiPhone上で実行すると追加ができない。Ajax使ってるはずなのに画面遷移が起きちゃう。試しにChromeでやってみたら同じ現象なので、Webkitだけの問題らしい。

いろいろ(中略)調べてみたところ、Submitボタンにあとから「onclick」を追加していたためだとわかった。WebkitだとこれがDOM上に反映されない。onclickを食ってなければ画面遷移が起きるのは当たり前やねぇ。ChromeにもFirebugが提供されてて助かった。他にも、formにonsubmit属性を追加しようとしてもダメだったので、Webkitではイベント系の属性は操作できないのかな。

こういう非互換情報がうまく見つけられないのは、たぶんもう、誰もonclickとか使ってないからかも知れない。当然、回避策はbindを使ってイベントハンドラを登録する方法なわけで、jQueryではこっちが主流なんだろう。なお、わざわざイベントハンドラを動的追加しているのは同じページ内に複数のお財布を置きたいからなので、「初めからonclickをハードコーディングしておけば?」というのはナシ(やればできるのはわかってるけど)。

で、さっそく使い始めてはや数日。想定どおり自分の浪費っぷりが目に見えて、かなりビビっているのであった。いやー、これは良くないな。ひどいものを作ってしまった。