もともと設定されているイベントハンドラより先に任意の関数が実行されるようにする
「もともと設定されているイベントハンドラをすり替える」を改良してみようと思います。この時のヤツはもともと設定されていた関数の変わりに自分で定義した関数にすり替えるというものでしたが、今回のはもともと設定されている関数も実行されるんだけど、それより先に自分で定義した関数が実行されるようにしてみます。
対象となるHTMLはこんな感じ。
<script type="text/javascript"> function show(message) { alert(message); } </script> </head> <body> <button onclick="show('クリック');">クリック</button> <button onclick="show('Click!');">Click!</button> </body>
で、jQueryはこんな感じ。
var func = $('button').attr('onclick'); $('button').attr('onclick', '').bind('click', function(){alert('hello');}).bind('click', func);
これで出来た!と最初思っていたんですが、問題ハケーン。
「クリック」の方をクリックした時は「hello」「クリック」と表示されて予想通りだったんですが、「Click!」の方をクリックするとこっちも「hello」「クリック」となり、「Click!」とはなりませんでした。あれれ。
よくよく考えたら、ここの部分!
var func = $('button').attr('onclick');
「$('button')」で二つ分のボタンが取れるのに、onclick属性に対応する関数は最初の「クリック」の方しか取れてない。関数の配列とかが返ってこないといけないのでは。
といっても返ってこないので、何とかやってみました。これでうまくいきます。
jQuery.each($('button').get(), function(){ var func = $(this).attr('onclick'); $(this).attr('onclick', '').bind('click', function(){alert('hello');}).bind('click', func); });
getメソッドを使って、一旦配列にするのがポイントです!