Ajaxで作成したinputタグが正しく動作しない

質問

元々htmlで作成してあるform内容をAjaxで送受信し、
その得られたjsonデータを元に新規にテーブルを作成しています。
ここまでは出来ているのですが、更にこのテーブルにそれぞれの項目にソートボタンを実装したいのですが、これが実現しません。

<input type="button"で作成したボタン(元のhtmlにあるボタンと同様の記述)は元ページのphpに遷移してしまい、
<button></button>で作成したボタンは何の動作も行いません。

元々ある検索ボタンと同様に非同期でpostするには
追加で作成したform内の要素はどのようにすれば可能でしょうか？

//テーブル作成関数
function create_table(data){
//テーブルヘッダー
var text = "<table><thead><tr><th>foo</th><th></th>";
$("li", "#foo_list").each(function(i, v){
text += "<th>" + v.innerHTML + "\

//●inputボタン作成部
<input type='button' class='search_btn' value='検索' />\
<button class='search_btn' value='" + v.id + "_up' ><img src='./foo.gif'></button>\
<button class='search_btn' value='" + v.id + "_down' ><img src='./bar.gif'></button></th>";
});
text += "</tr></thead><tbody>";

～省略～

//テーブル閉じる
text += "</tbody></table>";
$("#result_table").html(text);
}

//ajax送受信
$(function(){
var jsdata = "";
$('.search_btn').click(function(){
var form = $("#frm");
var json = $(form.serializeArray());
　 $.ajax({
url : "./hoge.php",
type : "post",
data : json,
success: function (jsdata){
results_data = eval( "(" + jsdata + ")" );
create_table(results_data);
}
});
});
});

よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

何らかのライブラリを使用しているようですが、不明なのとスクリプトの全体像もHTMLの構成もよくわからないので、推測での回答になりますが…

＞作成したボタン(元のhtmlにあるボタンと同様の記述)は
＞元ページのphpに遷移してしまい
元のボタンへのソート機能の実装をどのようにして行っているのか不明ですが、推測するところ、よくあるパターンと同じで、イベントを設定していないだけではないのですか？

ご提示のコードで生成しているボタンがそれであるのなら、ボタンより上位の要素（例えばドキュメントなど）でイベントを捕らえて処理するような実装になっていない限り作成したボタンは通常の機能となるはずです。

ソートの機能はスクリプトで実現しているのだと推測しますが、input要素を生成した際に、同時にバインドしておけばよいのではないでしょうか？
試しに、function(){ alert("fuga"); } のようなものを設定して動作するかどうか確認してみればわかるかと思います。
あるいは、イベント設定を先祖要素に設定するような方法に変えておけば、追加生成時にそれぞれにイベント設定を行わなくても済みます。（こちらの方がスマートな解決と言えるかも）

ただし、ソート機能が追加されるテーブルの構成に対して汎用的に作られていないと、動作しても予定通りの結果は得られないかもしれません。

＞元々ある検索ボタンと同様に非同期でpostするには
ボタンの機能が、ソートなのかajaxなのか不明ですが、いずれにしろイベントのバインドさえできれば動作するのではないかと推測します。

もし、お使いのライブラリがjqueryであるのなら、後から生成した要素にも有効なlive()メソッドを利用してイベントを設定するという方法でもよろしいかも知れません。

推測で書いているので、当たるも八卦ですが…

お礼

情報提示が少ない中ご回答頂きありがとうございました。

live()メソッドにて解決いたしました。
$('.search_btn').click(function(){...
↓
$('.search_btn').live("click",function(){

一旦全てのメソッドを覚えないと、スマートに使いこなせないと実感しました。これを機に、一通りの機能をテスト実装してから使用してみます。