解決済み

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

  • すぐに回答を!
  • 質問No.8718091
  • 閲覧数129
  • ありがとう数12
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 76% (2013/2633)

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

var element;

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

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

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

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

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

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

質問者が選んだベストアンサー

  • 回答No.2

ベストアンサー率 65% (1332/2045)

> 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回アラートされるようになる。これはフラグを持つなりで自分で対処しないといけない。

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

その他の回答 (全2件)

  • 回答No.3

ベストアンサー率 41% (255/620)

既に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、つまり、初回にクリックする要素と同じなので、本当に例の通りの実装ならば無意味な記述ですね。
  • 回答No.1

ベストアンサー率 65% (1332/2045)

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

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

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

お礼率 76% (2013/2633)

ありがとうございます!

ちなみに、

element.click(function(){
 ~
}

↑これはエラーが出てしまいました。

$('input').click(function(){
 ~
}

はできるのに、なぜ$('input')をelementに置き換えるとエラーになるのでしょうか?
度々すみません・・・。
投稿日時 - 2014-08-15 21:57:47
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ