[GAS] JSの書き出し結果に対するクリックイベントが発動しない

Question

GAS初心者です。
社内サポートの一環で、商品検索後、それぞれの結果から更に詳細呼び出しするアプリを作成中です。
詳細は（5-7列程の小さなテーブルなので）モーダルウィンドウで表示しようと考えています。

検索結果からクリックで関数を呼び出したいのですが、書き出した検索結果に対してクリックイベントがうまく発動しません。

eventEndにて検索結果のの配列第一行目に、modal-openのクラスをつけています。
以下のコードでなんとかPC上では反応するのですが、携帯端末（ipad,iphone）上で無反応です。(safariとchrome両方だめでした）

function eventEnd(searchresult) {  // スプレッドシートから取得した配列を元にテーブルを構成  
      var td = '';
      for (var i = 0, l = searchresult.length; i < l; i++) {
         var v = searchresult[i];
         td += '<tr>\n<td><a class="modal-open">' + v[0] + '</a></td>\n<td>' + v[1] + '</td>\n<td>' + v[2] + '</td>\n<td>' + v[3] + '</td>\n<td>' + v[4] + '</td>\n<td>' + v[5]　+ '</td>\n<td>' + v[6] + '</td>\n</tr>\n';
      }
      $('#resultRows').html(td);  
  }

$(document).ready(function(){　//これをつけると何故かPC(Chrome)上では動きました
    $('body').on('click','.modal-open',function(){
      var itemCode = $(this, "span").text();
      google.script.run.withSuccessHandler(PEnd).SelectPO(itemCode + '');    
    }); 
});

//こちらも試してみたのですがうまく行きませんでした。
//最初からHTML上に表示してあるものに対してはこれで動くのですが。
$('.modal-open').on('click', function() {})　

そもそもの定義の付与の仕方が悪いのか、それとも携帯端末では推奨できないのか・・・。

何卒ご教授の程宜しくお願いいたします。

Comments

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

「Google Apps Script」もタグに追加しておいてください

[HannaHanna]

変更いたしました。色々と至らず申し訳ありません。

Answer 1

申し訳ありません、解決しました。
HTMLの定義エリアミスでした・・・。
追加追加で書いて行っているうちに<div>を閉める場所がおかしくなってしまったようです。
ryojuさん、確認方法を教えていただきありがとうございました。

Answer 2

まずは携帯端末にてコードがどこまで実行されているかご確認くださいませ。

以下は、確認方法の一例としてalertを各行に追加しています。

function eventEnd(searchresult) {  // スプレッドシートから取得した配列を元にテーブルを構成
      alert('eventEnd');
      var td = '';
      for (var i = 0, l = searchresult.length; i < l; i++) {
         var v = searchresult[i];
         td += '<tr>\n<td><a class="modal-open">' + v[0] + '</a></td>\n<td>' + v[1] + '</td>\n<td>' + v[2] + '</td>\n<td>' + v[3] + '</td>\n<td>' + v[4] + '</td>\n<td>' + v[5]　+ '</td>\n<td>' + v[6] + '</td>\n</tr>\n';
      }
      $('#resultRows').html(td);  
  }

alert('add ready event');
$(document).ready(function(){　//これをつけると何故かPC(Chrome)上では動きました
    alert('ready');
    $('body').on('click','.modal-open',function(){
      alert('body click');
      var itemCode = $(this, "span").text();
      google.script.run.withSuccessHandler(PEnd).SelectPO(itemCode + '');    
    }); 
});

//こちらも試してみたのですがうまく行きませんでした。
//最初からHTML上に表示してあるものに対してはこれで動くのですが。
$('.modal-open').on('click', function() {})　

Comments

[HannaHanna]

具体的な確認方法をありがとうございます。

一つ一つ確認してみました所、
$(document).ready(function(){
これは無くてもPC上で動くことが分かりました・・・。

ただ、 $('body').on('click','.modal-open',function(){　が携帯端末上で動かないようです。
HTML上の初期表示文でもテストしてみましたがアラートが出ませんでした。

$('.modal-open').on('click', function() {})　は初期表示のみPC、携帯端末共に反応します。

clickの書き方が悪いのでしょうか？