jQueryでデータベースから動的にボタンを生成してかつイベントを付与する。

やり方簡単に探せないのでメモ　やっと動いた

Monacaのサンプルから派生
あらかじめデータベース内に
質問　答え
が入っている。
答えは
"はい、いいえ、わからない"
とか
"ある、ない"
などいろいろあるので、事前にボタンの数も決まってはいない。

    // 問い合わせ成功時のコールバック
    //
    function querySuccess(tx, results) {
        var len = results.rows.length;
        window.alert("データベースには " + len + " 行あります。");
　　//ボタンにシリアルナンバーつける。ccとする。
        var cc = 0;
        for (var i=0; i　　//もとのHTMLには用意しておく。そこに足していく感じ。
　　//質問をまず記入
            $("#add").append(results.rows.item(i).QUESTION + "
");
　　//データが0文字の場合にエラーが起きるので回避 二つ以上答えがあるデータを選ぶ
            var s = results.rows.item(i).ANSWER
            var pos = results.rows.item(i).ANSWER.search("、")
            if(pos>0){
                var ss = s.split("、");
                for (j in ss) {
                    var bt = "button" + cc
                    var bt2 = "#button" + cc
                    $('#add').append($(''));
                    //イベントをバインド。変数が$()の中に入ってるのがミソ
　　　　　　　　　//あとでどのボタンが押されたか、valueをセットしておかないとわからない。重要
　　　　　　　　　//このevent.data.valueもここで使う分にはエラーが起きないようだ
                    $(bt2).on("click", { value : bt }, function(event) {
                        alert(event.data.value);
                        $('#add').append( event.data.value );
                    });
                    cc++
                }
                $("#add").append("
")
            }
       
        }    
    }

これでデータベースから質問、答えを動的に生成できて、かつどのボタンが押されたかがわかった。

ここにいろいろコードを付加していけば、自由に拡張が出来る問診票が作成できる。

データベースの例はこんな感じ。

    function executeQuery(tx) {

        //質問が入ったテーブル構造です。

        tx.executeSql('DROP TABLE IF EXISTS QuestionnaireTable');

        tx.executeSql('CREATE TABLE IF NOT EXISTS QuestionnaireTable (QUESTION_CODE unique, QUESTION, ANSWER, DESCRIPTION)');

        //定義完了

        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N716","既往歴１（脳血管疾患）","1:はい、2:いいえ","")');

        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N721","既往歴２（心血管疾患）","1:はい、2:いいえ","")');

        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N726","既往歴３（腎不全・人工透析）","1:はい、2:いいえ","")');

        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N731","貧血といわれたことがある","1:はい、2:いいえ","")');

        tx.executeSql('INSERT INTO QuestionnaireTable (QUESTION_CODE, QUESTION, ANSWER, DESCRIPTION) VALUES ("9N736","現在、たばこを習慣的に吸っている","1:はい、2:いいえ","")');

 　　}