Ajaxでフォームデータを連続登録してテーブルに表示する方法

PHPとMySQLの環境でAjaxを使ってフォームからデータベースにデータを登録する仕組みを作っています。
登録フォームからデータを登録し、データ一覧をAjaxで更新することろまではできたのですが、１度データを登録した後に、再度データを登録しようとすると、jQueryで設定したevent.preventDefault();が効かず、フォームに設定したページに飛んでしまいます。
繰り返しデータを登録し、テーブルを更新する方法について教えて下さい。

以下、ファイルの構成と表示内容

【index.php】
[カテゴリー選択リンク]
<div id="mCateList">
<ul>
<li>
<a href="/categories/cate_view?id=35" idv="11" value="35">カテゴリーA</a>
<a href="/categories/cate_view?id=35" idv="12" value="35">カテゴリーB</a>
<a href="/categories/cate_view?id=35" idv="13" value="35">カテゴリーC</a>
</li>
</ul>
</div>

<div id="ajaxBox"></div> //カテゴリーに登録されている会社データをテーブルで表示＋新規登録フォームを表示

【list.php】
index.phpのカテゴリー選択リンクがクリックされたときに、カテゴリーに登録されているデータをテーブルで表示し、該当カテゴリーに新規登録するフォームを表示（フォームにカテゴリーのvalueをhiddenで設定）

【add.php】
フォームのボタンが押されたとき、データベースに新規データを登録。
カテゴリーに登録されているデータをテーブルで表示し、該当カテゴリーに新規登録するフォームを表示（フォームにカテゴリーのvalueをhiddenで設定）


[<div id="ajaxBox"></div>に表示される中身]
-------------------------------------------------------
[会社名一覧]
テーブルで登録されているデータを一覧表示（ソースは省略）

[フォーム]
<form action="categories/add" id="CompanyForm" method="post" accept-charset="utf-8">
<input name="data[Company][code]" class="form-control" type="text" id="CompanyCode"></div>
<input type="hidden" name="data[Company][cid]" value="12" id="CompanyCid">
</form>
--------------------------------------------------------

[jQuery部分]

<script type="text/javascript">
//カテゴリーのリンクをクリックしたとき、カテゴリーに登録されている会社を表示する処理
$(document).on('click', '#mCateList ul li a', function () {
event.preventDefault();
id = $(this).attr("idv");
val = $(this).attr("value");//カテゴリーIDを数字で取得

//カテゴリーに登録されているデータの一覧表示と登録フォームの表示
$.ajax({
url: '/categories/list/,
type: 'Post',
data: {cid: val},
timeout: 10000,
dataType: 'text'
})
.done(function (data) {
$("#ajaxBox").html(data);


//登録ボタンが押された時の処理（カテゴリーにデータを新規登録）
$("#addButton").on("click", function () {
event.preventDefault();
var postData = {};
$("#CompanyForm :input").each(function () {
postData[$(this).attr("name")] = $(this).val();
});
var formData = $("#CompanyForm").serialize();

$.ajax({
url: '/categories/add/'; ?>',
type: 'POST',
data: formData,
timeout: 10000,
dataType: 'text'
})
.done(function (data) {
// 通信が成功したときの処理
// （再表示）カテゴリーに登録されているデータの一覧表示と登録フォームの表示
$("#ajaxBox").html(data);　★★★

})
.fail(function (data) {
// 通信が失敗したときの処理
})
.always(function (data) {
// 通信が完了したとき
});
});


})
.fail(function (data) {
// 通信が失敗したときの処理
})
.always(function (data) {
// 通信が完了したとき

});
});
</script>


★★★の部分で上記に記載した
[<div id="ajaxBox"></div>に表示される中身]
が表示されるようになっていますが、これに対応する　 $("#addButton").on("click", function () {}
のような処理が無いのが問題だと感じています。
このような処理を描こうとすると、複数回登録があるときに、その数分だけソースを書く感じになってしまうのでどのように処理を作成したらよいか悩んでいます。

ご回答よろしくお願いします。

No.5 ベストアンサー 回答者： fujillin 回答日時： 2015/12/02 16:26

なんだかややこしいので、ちゃんと把握できてないのですが、なんとなくの感じで・・・

2回目から動作しなくなる「登録ボタン」って、ajaxの結果で書き直して（上書きして）ませんか？
・・・・で、そのボタンに対する処理の定義は、最初に
　$("#addButton").on("click", function () {　～～　}
で行っているようなことになってませんか？

そのような場合、見た目は同じタグ、同じidであっても、書き換えられたものはブラウザ上では同じ要素とは認識されません。
結果的に、イベントを設定しておいた要素は（上書きされて）削除されてしまったことになり、そのイベントは発生しないことになります。

・・・・というのが、原因ではないでしょうか？（まったくの山勘なので不明です）


仮に、そうだとすれば対処法としては、
1）要素を挿入（または上書き）するときに、その要素のクリックイベント等を設定しておく。

いちいち、これをやるのが面倒であれば、
2）マウスイベントは伝播するので、変化しない上位要素でイベントを監視するようにする。
ことでも対処可能です。

ご提示のスクリプトで、
　$(document).on('click', '#mCateList ul li a', function () {　～～
としてご使用なさっているので、理解なさっていることとは思いますが、この記述だと、documentレベルでイベントを監視していますので、対象となるa要素を後から（スクリプトなどで）追加しても、イベントの取得が可能です。
（通常の設定だと、後から追加した要素に対するイベントは取得できないので、上述の1）のような対処が必要）

少し古いバージョンのjQueryでは、これを明示したliveメソッドなどもありましたが（現在も使えるはず）、今後はonメソッドに統一していきそうな雰囲気ですね。
http://api.jquery.com/live/
http://api.jquery.com/on/


それなので、上位要素でイベントを監視するようにすれば、上書きしたり追加した要素のイベントも取得できるようになるかと想像します。
（HTMLの構造を理解できてないので、具体的なスクリプトを示すことはできませんが）

※　よく理解せずにの回答なので、的外れでしたらご容赦下さい。

この回答へのお礼

fujillinさま

ご回答ありがとうございます。
Ajaxで$("#addButton").on("click", function () {　～～　}に該当する部分の要素を書き換えてしまっていたのが２回目に動かない原因だったことがわかりました。ご指摘頂いた通りです。

自分で$(document).on('click', '#mCateList ul li a', function () {　～～という書き方はできていましたが、documentレベルでイベントを監視するというレベルでの認識が無かったので、もう一度、「マウスイベントの伝播」「documentレベルでイベントを監視」あたりを勉強し直したいと思います。

何が原因か？何を学べば問題が解決するのか？がわからない状態で困っていましたが、原因と学ぶべき課題が見えました。ありがとうございました。

お礼日時：2015/12/08 11:00

No.4 回答者： gao57830 回答日時： 2015/11/30 14:40

＞<input id="addButton" type="submit" value="Submit">

先に、type="button"を試してみてください。
<input id="addButton" type="button" value="Submit">

念のため、
＞<form action="categories/add"
を<form action=""
に。

それが駄目なら、onclickで。

この回答へのお礼

gao57830さま

ご回答ありがとうございます。
上記の順序で試してみます。

お礼日時：2015/12/02 08:44

No.3 回答者： gao57830 回答日時： 2015/11/30 11:28

＞１回目の登録の時は動いており、データが登録されます。

なぜ１回目が動くのか不思議ですが・・・？？？

そもそも、「addButton」はどこにあるのでしょう？
そもそも、Formのアクションを実行する必要があるのでしょうか？
例えば、
<input type="submit" value="登録">
を
<input type="button" value="登録" id="addButton">
にしたら？？？　駄目かな？？？

あるいは・・・、
登録処理のAjaxの処理をfunctionに書き出し、
<input type="button"
の onclick="" で呼び出してみるとか？？？

この回答へのお礼

gao57830さま

何度もご回答ありがとうございます。
addButtonは<form></form>の中に
<input id="addButton" type="submit" value="Submit">
という形で記載してあります。

onclickで呼び出す方法なども試してみたいと思います。

お礼日時：2015/11/30 14:21

No.2 回答者： gao57830 回答日時： 2015/11/29 23:05

＞//登録ボタンが押された時の処理（カテゴリーにデータを新規登録）

＞$("#addButton").on("click", function () {
私としては、これが呼ばれていないのではないかと思っているのですが？？？

なので、その下の
＞event.preventDefault();
も実行されず、フォームのアクションが実行されているのでは？

この回答へのお礼

gao57830さま

ご回答ありがとうございます。
$("#addButton").on("click", function () {
の部分は１回目の登録の時は動いており、データが登録されます。
データ登録後、新規にデータが追加されたテーブルと登録フォームが再度Ajaxで表示されますが、ここでもう一度データを追加しようとすると　event.preventDefault();が働かない（$("#addButton").on("click", function () {）も動いていないという状態です。

Ajaxでフォームを再表示させたとき、もう一度jQueryを再読み込みするような処理が必要なのでしょうか？

お礼日時：2015/11/30 09:08

No.1 回答者： gao57830 回答日時： 2015/11/29 20:10

昔の記憶で自身がないので、独り言・・・。

＞<a href="/categories/cate_view?id=35" idv="11" value="35">カテゴリーA</a>
＞<a href="/categories/cate_view?id=35" idv="12" value="35">カテゴリーB</a>
＞<a href="/categories/cate_view?id=35" idv="13" value="35">カテゴリーC</a>
?id=35とvalue="35"に何の意味が？

＞id = $(this).attr("idv");
＞val = $(this).attr("value");//カテゴリーIDを数字で取得
変数idに"idv"の値を取得しているが、変数valが「カテゴリーID」？

＞<form action="categories/add" id="CompanyForm" method="post" accept-charset="utf-8">
＞<input name="data[Company][code]" class="form-control" type="text" id="CompanyCode"></div>
＞<input type="hidden" name="data[Company][cid]" value="12" id="CompanyCid">
＞</form>
"button"も"submit"もないが、ボタンが表示されている？
"button"か"submit"を追加して、id="addButton"にしたいのでは？
name属性には、何の意味が？　不要では？
項目の判断は、id属性で行い、value="data[Company][cid]"でOKでは？

＞var postData = {};
＞$("#CompanyForm :input").each(function () {
＞postData[$(this).attr("name")] = $(this).val();
＞});
これには何の意味が？
これがあるから、一度はデータが登録出来る？
必要だとしても、上記の修正を考えて、
var postData = {};
$("#CompanyForm :input").each(function () {
　postData[$(this).attr("id")] = $(this).val();
});
かな？


？？？
本当に動作してるのかな？？？
独り言です。

この回答へのお礼

gao57830さん

ご回答ありがとうございます。
フォームの部分はボタン（submit）のソース部分が消えていました。実際にはボタンが付いており、動作はしております。
idやname属性はPHPのフレームワークを使っており、不必要なものも含まれてしまっていますが、プログラムの動作上は影響無い感じです。

２回目の登録部分の下記の部分に問題がありそうな感じがしています。

.done(function (data) {
// 通信が成功したときの処理
// （再表示）カテゴリーに登録されているデータの一覧表示と登録フォームの表示
$("#ajaxBox").html(data);　★★★

})

この辺りの部分で何かお気付きの点がございましたら、お知恵をお貸しください。
よろしくお願い致します。

お礼日時：2015/11/29 22:47