QA@IT

jqueryでフォームをajax送信する事についての質問です。

5325 PV

jqueryでフォームをajax送信する事についての質問です。
下記のソースコードにて、フォーム送信後、送信元と同じフォームが再度読み込まれるプログラムなのですが、
1回目のフォーム送信後、もう一度フォーム送信をしようとすると、「入力内容を確認する」ボタンをクリックしても、何も反応が起きません。

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

宜しくお願い致します。

【送信元ソースコード(index.html)】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

$(function(){
$('#button').on("click",sayhello);

function sayhello(){
$.ajax({
type: 'POST',
url: "hello.php",
data: $('form').serialize(),

success: function(data) {
$('#input_form').html(data);
}
});
}

});

【送信先ソースコード(hello.php)】
<?php
echo $_POST['name'];
echo '';
?>

  • ソースが不完全に見えているのでパッチも受け入れてくださいね。 -

回答

パッチが受け入れられないので、シンタックスハイライトを修正してコードを再掲しておきます。

【送信元ソースコード(index.html)】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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(){
  $('#button').on("click",sayhello);

  function sayhello(){
    $.ajax({
      type: 'POST',
      url: "hello.php",
      data: $('form').serialize(),
      success: function(data) {
        $('#input_form').html(data);
      }
    });
  }
});
</script>
</head>

<body>

  <section id="input_form">
    <form id="form">
      <input type="text" name="name" id="name" />
      <input id="button" type="button" value="入力内容を確認する" />
    </form>
  </section>

</body>
</html>

【送信先ソースコード(hello.php)】

<?php
echo $_POST['name'];
echo '<br>';
?>

<form id="form">

<input type="text" name="name" id="name" />
<input id="button" type="button" value="入力内容を確認する" />

</form>
編集 履歴 (0)

後出しになりますが、.on() の使い方を変えてみてはどうかと思いました。

http://api.jquery.com/on/

$(document).on("click", '#button', sayhello);
編集 履歴 (1)
  • これでも動きますね。ただボタンとドキュメントの間(formなど)のClickイベントで event.stopPropagation() されると動作しなくなります。(かなり重箱の隅なコメントですいません、今回はこちらのほうが一か所でシンプルになるのでいいですね) -

ありがとうございます!!
無事解決しました。

編集 履歴 (0)
    success: function(data) {
        $('#input_form').html(data);
    }

と、#input_formの内容を丸ごと書き換えているため、#buttonも書き換わりイベント設定も消えているためだと思います。

    success: function(data) {
        $('#input_form').html(data);
        $('#button').on("click",sayhello);
    }

と、再バインドすればいいのではないでしょうか。

編集 履歴 (1)
ウォッチ

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