QA@IT

Ajaxによってloadされたボタンに対するクリックイベントについて

3558 PV

Ajaxでphpファイルからボタンをロードし、ロード後に、そのボタンのidを指定して、クリックイベントを実施したいのですが、反応しません。
理由と解決策について教えて頂けませんでしょうか?

【読み込み元(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">
<script src="jquery-2.0.2.js"></script>

<script type="text/javascript">


$(function(){
 $('#input_form').load("hello.php");
 $('#confirm_button').on("click",sayhello);

 function sayhello(){
   alert('hello');
 }

});


</script>

</head>
<body>

<section id="input_form">
</section>

</body>
</html>

【読み込み先(hello.php)】

<?php

echo '<input type="button" id="confirm_button" value="ボタン" />';

?>

回答

非同期でロードされて、ロードの完了よりも早くイベントの設定が行われるからでしょう。

loadの第三引数にコールバック用のFunctionを設定し、そこでイベントの設定をすればいいと思います。

編集 履歴 (0)
  • ありがとうございます!出来ました。 -
ウォッチ

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