jQueryで要素を取得した後の使い方について

Question

jQueryでグローバル変数に要素を代入した後にその変数を利用したいのですが記述方法がわかりません。

var element;

// クリックしたinputの要素をelementに代入
$(function(){
　$("input").click(function(){
　　element = $(this);
　});
});

// elementを利用する
function alertEx(){
　alert($(element).val());
}

alertEx関数を実行するとクリックしたinputの値を表示するようにしたいです。

alertEx関数でのelementの使い方が間違っていると思うのですが、どのように記述すればinputの値をalert表示できるのでしょうか？

知りたいのは、あくまでも要素をelementに代入した後の利用の仕方です。
表示方法とかではないです（上記コードは例です）。

どうぞよろしくお願い致します。

anmochi · Accepted Answer

> element.click(function(){
>　～
> }
>
> ↑これはエラーが出てしまいました。

ん～、ぬるぽだったんじゃないか？　一度elementが設定されたらそんな事はないはずだけど。例えば、<head>内に以下のように書いたとしよう。

var element;

// クリックしたinputの要素をelementに代入
$(function(){
　$("input").click(function(){
　　element = $(this);
　});
});

// elementを利用する
function alertEx(){
　alert($(element).val());
}

element.click(function(){ // ・・・(1)
　alert("hoge");
});

これは明らかにミスだ。なぜならば、(1)の時点ではelementはnullだからだ。だがしかし、

var element;

// クリックしたinputの要素をelementに代入
$(function(){
　$("input").click(function(){
　　element = $(this);
　});
});

// elementを利用する
function alertEx(){
　element.click(function(){ // ・・・(2)
　　alert("hoge");
　});
}

これは即座にはエラーにならない。このページがロードされた後、一度もinputタグをクリックせずにalertEx()を呼び出して(2)に到達した時だけエラーになる。IE10、jquery 1.8.3で確認。これもエラーにならないようにするには
function alertEx(){
　element && element.click(function(){
　　alert("hoge");
　});
}
などとnullチェックを追加すれば良い。ところが、これだとalertEx()が呼び出された時にelementに入っているinputにどんどんどんどんイベントハンドラが追加されていってしまう。画面をロードしてinputをクリック→alertEx()を3回呼び出す→inputをクリックするとhogeが3回アラートされるようになる。これはフラグを持つなりで自分で対処しないといけない。

「エラーが出る」というのは具体的に書いた方がいいだろう。そのコードを書いた後、どのブラウザで、どうした時に、何というエラーメッセージが表示されるのか。

tracer · Answer

既にNo.1さんが回答されていますが、clickが有効にならない件について、横から失礼します。
有効にならない理由はNo.2さんが述べられていますので、その解決策として違うアプローチを書いてみます。
単純に言うと、inputをclickしないとelementに要素が入らないわけなので、element.clickの宣言がinputのclick後であれば問題はないわけです。

従って、以下のように関数を使わずにinput click内に直接clickイベントを書くか、
$("input").on("click",function(){
　element = $(this);
　element.on("click,function(){
　　alert(element.val());
　});
});

clickイベントを外部関数に持ち出したいのであれば、elementを引数にして渡せばよいです。
$("input").on("click",function(){
　element = $(this);
　clickEv(element);
});
function clickEv(element){
　element.on("click",function(){
　　alert(element.val());
　});
}

ただ、例の場合、elementの対象がinput、つまり、初回にクリックする要素と同じなので、本当に例の通りの実装ならば無意味な記述ですね。

anmochi · Answer

// elementを利用する
function alertEx(){
　alert($(element).val());
}
↓
// elementを利用する
function alertEx(){
　alert(element.val());
}

こうだな。なぜかと言うとelementには既に（input要素ではなく）jQueryオブジェクトが入っているから。もちろんelementがnullじゃないチェックとかは要るぜ。

jQueryで要素を取得した後の使い方について

> element.click(function(){

既にNo.1さんが回答されていますが、clickが有効にならない件について、横から失礼します。

// elementを利用する

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング