- ベストアンサー
JQueryのclick(fnc)で指定された関数中のthis
- JQueryのclick(fnc)で関数中のthisの扱いについてお尋ねします。下記コードでは仮に2つのクラスをモデルとコントローラとして、コントローラからモデルの関数を呼び出しています。
- value="HTML Tag"のボタンは期待したとおりに'chicken crows.'を表示しますが、value="JQuery"のボタンはcrow()中のthis.modelがundifinedになってしまいます。
- 後者では$.fn.controllers.chickenController.crowをinputタグにコピーしてそれを実行しているのではないかと思います。そのためかthisはHTML Inputを指します。thisを使用する以外にモデルのcrow()を実行する方法はありませんでしょうか？
- yu090jp
- お礼率37% (29/78)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
value="HTML Tag"のボタンとモデルは違えど同じ動作をしたいのならば $('#b').click($.fn.controllers.chickenController.crow); ではなくて、 $('#b').click(function(){$.fn.controllers.chickenController.crow();}); とするのでは。 以前のままだと質問者さんの認識通り、 元の関数とは別物として#bのclickにコピーされたものが代入されるかと思います。
その他の回答 (1)
- atse
- ベストアンサー率83% (36/43)
> $(#b).click(fnc)で指定した場合、下記のようなことが行われていると解釈しましたが、正しいでしょうか？ > ○動作した場合、HTMLInput.onclick = function(){return function(){$.fn.controllers.chickenController.crow();}} > ×動作しない場合、HTMLInput.onclick = function(){return $.fn.controllers.chickenController.crow; } それだとonclickによってfunctionがreturnされるだけなので、 そのように書くとしたら、 HTMLInput.onclick = (function(){return function(){$.fn.controllers.chickenController.crow();};})(); HTMLInput.onclick = (function(){return $.fn.controllers.chickenController.crow;})(); みたいな感じなので、よって、 動作○ HTMLInput.onclick = function(){$.fn.controllers.chickenController.crow();}; 動作× HTMLInput.onclick = $.fn.controllers.chickenController.crow; といった記述表現の違いになります。 でも言いたいことは伝わってきたので、仰っていることで解釈は合っていると思いますよ。
お礼
なるほど、ありがとうございます。 onclick="var foo = 'bar';" と onclick="function(){alert('bar');}" はDom上で関数であるかどうかによって分岐されないだろうと思ってfunctionでくるんでしまいました。 例えば下記のようなことがわざわざDomのロード中に行われることはないと思ったので。 if(typeof(dosth) == 'function'){ HtmlInput.onclick = dosth; }else{ HtmlInput.onclick = function(){dosth}; } 掲題の件自体は解決したので。終了とさせて頂きます。 ありがとうございました。大変助かりました。
お礼
ありがとうございます。ご指摘のとおり無名関数を使用したら動作しました。助かりました。 $(#b).click(fnc)で指定した場合、下記のようなことが行われていると解釈しましたが、正しいでしょうか？ ○動作した場合、HTMLInput.onclick = function(){return function(){$.fn.controllers.chickenController.crow();}} ×動作しない場合、HTMLInput.onclick = function(){return $.fn.controllers.chickenController.crow; } だとすればonclick='alert(this);'はHTMLInput.onclick = function(){return alert(this);} であり、'object HTMLInputelement'を表示するのも筋が通っています。