QA@IT

jqueryにおけるloadメソッドでの複数個のボタン呼び出しについて

3407 PV

loadメソッドで、phpからボタンを複数個呼び出し、各々のボタンをクリックしたら、各々のアラートが上がるという機能を実装しようとしております。

下記のコードですと、ボタンをクリックする前に、アラートがあがってしまいます。

原因と改善方法について教えて頂いて宜しいでしょうか?

【呼び出し元(index.html)】

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="jquery-2.0.2.js"></script>

<script type="text/javascript">

$(function(){
    $('#content').load("./hello.php",do_hello);

    function do_hello(){
        for(i=0;i<2;i++) $('#button'+i).on("click",say_hello(i));
    }

    function say_hello(tmp){
      alert(tmp);
    }
});


</script>

</head>
<body>

<section id="content">
</section>

</body>
</html>

【呼び出し先(hello.php)】

<?php

for($i=0;$i<2;$i++){
    echo '<form action="" method="post">';
    echo '<input type="button" id="button' . $i . '" value="ボタン' . $i . '">';
    echo '</form>';
}

?>

回答

$('#button'+i).on("click",say_hello(i))の中でsay_hello(i)が実行されているのが原因ですね。
onメソッドの引数は「イベント名」と「関数」ですが、第二引数がsay_hello(i)となっているので「関数を呼び出した結果」になってしまっています。

幾つかやり方はありますが、以下のような形でどうでしょうか。

$("#sample" + (i + 1)).on("click", (function(i) { return function() { say_hello(i) }})(i));

第二引数は「関数」を渡す必要があるため、return function~で返された関数を渡すようにし、変数iを束縛しています。

なお、以下のように書きたくなるところですが、この書き方だと第二引数は「関数」になるものの、変数iが束縛されておらず、クリックイベント発生時にiが評価されるため、全てが2になってしまいます。

$("#sample" + (i + 1)).on("click", function() { say_hello(i) });
編集 履歴 (0)
  • ありがとうございます。うまくいきました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。