質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16434questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Google Apps Script

    845questions

    Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 126

HannaHanna

score 2

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() {}) 

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/27 21:06

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

    キャンセル

  • mts10806

    2018/07/27 21:06

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

    キャンセル

  • mts10806

    2018/07/27 21:07

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

    キャンセル

  • HannaHanna

    2018/07/27 21:44

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

    キャンセル

回答 2

check解決した方法

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

以下は、確認方法の一例として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() {}) 

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/28 16:15

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

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    GASをDRYで書きたい

    前提・実現したいこと Google Apps Scriptを使いグーグルカレンダーの翌日と翌々日の予定を 自分のGmailに送っています。 しかし、このコードには重複があるの

  • 解決済

    GAS⇔html間の値の渡し方

    前提・実現したいこと GASでVBAでいうとユーザーフォームのようなものを作るために、UserForm.htmlを作成し、そこにテキストボックスなどを配置し、その値をGAS側で受け

  • 解決済

    IEでのモーダルウインドウ表示

    前提・実現したいこと Lightboxのようにギャラリーページの画像をクリックでモーダルウインドウ(説明文)を表示したいです。 発生している問題・エラーメッセージ どうしてもI

  • 解決済

    Gas 任意のセル範囲コピー

    皆様いつもお世話になっております。 Google Apps Scriptで質問があります。 宜しくお願い致します。 下記のコードはsheet1のA1セルをsheet2のA列最終行に

  • 解決済

    jQueryを利用したモーダルウィンドウをロード時に開きたい。

    前提・実現したいこと 閲覧ありがとうございます。 モーダルを、ウィンドウを開いた瞬間に出すプログラムを組みたいです。 ソースの方、http://coolwebwindow.com/

  • 解決済

    GAS⇔HTML条件抽出表示

    GASにてHTML内のテキストボックスに店コードを入れて、スプレッドシートに記載されている 内容から検索・その抽出結果をHTMLへ全て表示させたいです。 該当する条件でヒットす

  • 受付中

    GAS リンクURLの取得

    初めてTeratailで質問させて頂きます。 情報に不足がありましたらご指摘ください。 GoogleAppsScriptを利用して、スプレッドシート内でセルに設定されたリンクの

  • 解決済

    GAS:連番の振り方

    GoogleAppsScript  前提・実現したいこと Googleスプレッドシートで受注管理を行おうとしています。 今回解決したい内容としては、受注番号のふりかたです。 現

同じタグがついた質問を見る

  • JavaScript

    16434questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Google Apps Script

    845questions

    Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。