スペースフィールドに表示させたaリンク文字のクリックイベント取得

kintone カスタマイズ
1

ご覧いただきありがとうございます。

ボタンを作成して、それを押すと、他フィールドに入力された情報をもとにAPIで取得した複数情報を
<ul class=“data”>
<li><a href=“#” class=“0”>情報1</a></li>
<li><a href=“#” class=“1”>情報2</a></li>
<li><a href=“#” class=“2”>情報3</a></li>
<li><a href=“#” class=“3”>情報4</a></li>
</ul>
のようにHTMLとして変換し、スペースに表示させています。
これに関しては、こちらの情報を参考にしています。
「第3回 レコード詳細にもボタンを設置しよう！」
https://cybozudev.zendesk.com/hc/ja/articles/201952870-%E7%AC%AC3%E5%9B%9E-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E3%81%AB%E3%82%82%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE%E3%81%97%E3%82%88%E3%81%86-

ここでリスト形式で情報はユーザーに選択肢として提示しており、いずれかのaリンク文字がクリックされた場合に、それをトリガーとして、kintoneAPIを用い他のフィールドを変更しようとしています。

そこで、
$(‘ul.data>li>a’).click(function(event) {
alert(‘click’);
// フィールド編集処理
});
という記述を、編集画面・追加画面表示時のイベント（[‘app.record.edit.show’, ‘app.record.create.show’]）に追加しましたが、リンクをクリックしても、フィールド編集処理（現在は簡単なアラートで試していますが）が実行されません。
consoleを見ていますが、特にエラーは表示されていません。
jQueryはCDNで読み込んでいる状態です。

どのようにすれば選択肢のクリックを取得できるでしょうか。
また、APIから取得した情報を選択肢として選ばせ、その情報をもとにフィールド変更ができる方法として、これ以外にもkintoneのAPIなどを用いた、よりよい方法があれば教えていただきたいです。

わかりにくい記述などありましたら、ご指摘いただけますと幸いです。
どうぞよろしくお願いいたします。

2

kmdr さん
cstapの瀧ヶ平です。

フィールドの編集の処理はどのような処理をかいているのでしょうか？
alertが実行されていふのであればそちらの記述の問題かと思われます。

3

瀧ヶ平さん
回答いただきありがとうございます。

こちらの書き方が悪く申し訳ありません。
今現在はフィールド編集の処理を書かずに、alertの処理のみを書いています。
そのalertすらも実行されていないという状況です。

4

クリックイベントが拾えていないということで、kintoneのレコード操作というより、JavaScript、jQueryやセレクタの問題のように思います。

まずクリックイベントを拾うためのセレクタが指定しやすいように、HTMLを作っておく必要があるように思います。
`

`

で、クリックイベントの拾い方としては、
$('.myClass').click(function(event) { alert('click'); console.log($(this).text()); console.log($(this).attr('code')); // フィールド編集処理 });

のような感じで。あとは、.text()等で拾った値によってREST APIをコールして、フィールドに値をセットするなり・・・といったことではないかと想像しました。

5

Ryu Yamashitaさん

ご回答ありがとうございます。

ご指摘いただいた通り、私自身も、Javascript、jQueryなどの問題なのではないかと思い、kintoneとは全く別のシンプルなローカル環境で、リストと、上記スクリプトを書いて試してみたのですが、そちらの場合はalertを表示できました。

アドバイスいただいた通りに、a要素にクラス名を付与して、セレクタでもそのクラス名を指定してクリックメソッド（イベント）を起こすことを試してみましたが、動きませんでした。

私自身も原因が推測し難いのですが、編集・追加画面表示時のイベント内にその処理（クリックイベント）を追加してしまうことは問題ではないでしょうか…

6

新規登録・編集画面でアンカーは何かあるかもと試してみましたが、何やらイベントが走って「データの読み込みに失敗しました。」のエラーが出ますね。

<a href="#">を<div>に変えると大丈夫でした。

(function() {
  "use strict";

  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], function(event) {
    $(kintone.app.record.getSpaceElement('space')).append(
      $('<ul class="myList"><li><a href="" class="myClass" code="1">情報1</a></li><li><a href="" class="myClass" code="2">情報2</a></li><li><a href="" class="myClass" code="3">情報3</a></li><li><a href="" class="myClass" code="4">情報4</a></li></ul>')
    );

    $('.myClass').click(function(event) {
      alert('click');
      console.log($(this).text());
      console.log($(this).attr('code'));
      // フィールド編集処理
    });
    return event;
  });
})();

<div>にスタイルあてて対応されてはいかがでしょうか。

7

a href=""をdivに置換する前のを貼ってしまいましたので、置換してみてください。

8

Ryu Yamashitaさん
ご回答ありがとうございました。
すみません、解決いたしました。
いただいたコードをそのまま入力すれば動いたのですが、ボタンなどのonClickメソッドで挿入した文字列のクリックでは動かなかったので、以下のように修正したところ動きました。
（多少省略して記述させていただきます。）

kintone.events.on(['app.record.edit.show', 'app.record.create.show'], function(event){
  // スペースにボタンを挿入
  mySpaceFieldButton = document.createElement('button');

  // ボタンクリックイベント
  mySpaceFieldButton.onclick = function(){
    kintone.proxy('http://xxx/json/', 'GET', {}, {}, function(body, status, headers) {
      var rootListUl = (挿入するリストのHTMLタグ)
      $(kintone.app.record.getSpaceElement('space')).append(rootListUl);

      $('.myClass').click(function(event) {
        alert('click!!!');
        // フィールド編集処理
      });
    }
  }
}

フィールド編集処理を行いたかったclickメソッドの記述位置に問題があったのかと思います。API処理を行うproxy内にclickメソッドの記述すればうまく動くようでした。
自分のjavascriptについての知識不足でした…
お手数煩わせすみませんでした。
ご回答いただいた皆様ありがとうございました。