# モーダルウィンドウをクリックすると無効になるイベントがある

**URL:** <https://community.cybozu.dev/t/topic/6007>\
**Category:** kintone 開発相談\
**Created:** [2022 年 5 月 23 日午前 7:46 UTC](https://community.cybozu.dev/t/topic/6007 "2022-05-23T07:46:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2812](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Legacy\_Account2812](https://community.cybozu.dev/u/Legacy_Account2812)\
**Post date:** [2022 年 5 月 23 日午前 7:46 UTC](https://community.cybozu.dev/t/topic/6007/1 "2022-05-23T07:46:41Z")

</div>

お世話になっております。

&nbsp;

テーブルのなかにボタンを設置し、

ボタンをクリックするとモーダルウィンドウが表示されるのですが、

モーダルウィンドウをクリックすると、

下記、処理が行われなくなります。

デバッグしても処理を通らなかったので、イベントが無効になっている？？

```
// 新規作成時、バーコード、ピックアップ、レジ袋、配達情報以外のメモ 非表示
(function () {
    "use strict";
    kintone.events.on(['app.record.create.show','app.record.create.change.order_items'], function (event) {
      // バーコード
        $('table:eq(2) thead tr th:eq(12)').hide();
        $('table:eq(2) tbody tr td:nth-child(13)').hide();
      //ピックアップラジオボタン
        $('table:eq(2) thead tr th:eq(4)').hide();
        $('table:eq(2) tbody tr td:nth-child(5)').hide();
        // レジ袋
        kintone.app.record.setFieldShown('bagM', false);
        kintone.app.record.setFieldShown('bagL', false);
        kintone.app.record.setFieldShown('bagPrice', false);
        $('#user-js-bagSpace').parent('div').hide();
        // 配達情報以外のメモ
        kintone.app.record.setFieldShown('リッチエディター_1', false);
        kintone.app.record.setFieldShown('memoPay', false);
    });
})();

```

モーダルウィンドウのコードについては下記のとおりです。

テーブルに文字列フィールドをボタンに変換しました。

ボタンをクリックすると、モーダルウィンドウが表示します。

モーダルウィンドウの中身は他アプリの在庫データになります。

```
kintone.events.on([

    'app.record.create.change.jan', 'app.record.edit.change.jan'

], (event) => {

    const sp = document.getElementsByClassName("field-5525974");

    const hide = document.getElementsByClassName("value-5525974");

    let record = event.record

    record['order_items'].value.forEach((row, index) => {

        let jan = row.value['jan'].value;

        let buttonId = 'zaikoBtn' + jan;

        let removeBtnID = sp[index].lastElementChild.id;

        let removeButton = document.getElementById(removeBtnID);

        if (removeButton) sp[index].removeChild(removeButton);

        if (jan) {

            let btn = document.createElement('button');

            btn.id = buttonId;

            btn.className = 'jan-button';

            btn.textContent = '開く';

            btn.onclick = () => {

                showJan(jan);

            };

            sp[index].appendChild(btn);

            hide[index].style.display = 'none';

        }

    });

    $('.jan-button').hover(() => {

        $(this).css({

            color: '#ECECEC',

            background: '#3498DB'

        });

    });

    return event;

});

function showJan(jan) {

    let getRecords = {

        app: 398,

        query: 'code = \"' + jan + '\" order by deliStore asc'

    };

    kintone.api(kintone.api.url('/k/v1/records', true), 'GET', getRecords, (resp) => {

        let CDs = {

            CD102: '-',

            CD103: '-'

        };

        resp.records.forEach((record) => {

            let deliStoreCD = record['deliStore'].value, zaiko = record['zaiko'].value;

            let deliStore = "CD"+deliStoreCD;

            if (CDs[deliStore]) CDs[deliStore] = zaiko;

        });

        let headerSpace = kintone.app.record.getHeaderMenuSpaceElement();

        headerSpace.innerHTML = '<div id="dialog_content_1" class="dialog_content" style="display:none;">' +

            '<div class="dialogModal_header">JAN:' + jan + '</div>' +

            '<div class="dialogModal_content">' +

            '<table border="1px">' +

            '<tr><td>店舗</td><td>在庫数</td></tr>' +

            '<tr><td>102 XX</td><td>' + CDs.CD102 + '</td></tr>' +

            '<tr><td>103 XX</td><td>' + CDs.CD103 + '</td></tr>' +

            '</table></br>' +

            '</div>' +

            '<div class="dialogModal_footer">' +

            '<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +

            '</div>' +

            '</div>';

        $('.dialog_content').dialogModal({

            topOffset: 0,

            top: '10%',

        });

    }, (error) => {

        console.error(error);

    });

};

```

原因をご教授いただければ幸いです。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 5 月 26 日午前 1:54 UTC](https://community.cybozu.dev/t/topic/6007/2 "2022-05-26T01:54:49Z")

</div>

関石さん

こんにちは。

&nbsp;

上の方のコードが反映されないということでしょうか。

「新規作成時、バーコード、ピックアップ、レジ袋、配達情報以外のメモ 非表示」

&nbsp;

‘app.record.create.show’ イベントで処理されており

新規作成画面が開いたタイミングで全て非表示になるため

その後のテーブル変更やモーダル表示とは関係ない気がします。

&nbsp;

新規作成画面が開いたときに非表示にならないということでしたら別の原因を探ります。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2812](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Legacy\_Account2812](https://community.cybozu.dev/u/Legacy_Account2812)\
**Post date:** [2022 年 5 月 26 日午前 4:28 UTC](https://community.cybozu.dev/t/topic/6007/3 "2022-05-26T04:28:27Z")

</div>

[koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi) さま

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

‘app.record.create.show’ イベントでは項目非表示となりますが、

ボタンをクリックすると、テーブルに行を追加しても（'app.record.create.change.order\_itemsイベント）項目が非表示にならず、

ボタンをクリックしなければ行を追加しても項目が非表示になります。

&nbsp;

以上、よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2022 年 5 月 26 日午前 10:05 UTC](https://community.cybozu.dev/t/topic/6007/4 "2022-05-26T10:05:55Z")

</div>

すみません、動作を見落としていました。おっしゃる通りですね。

モーダル内にtable要素が生じるので、それが0番目としてカウントされています。

そのため、モーダル発生後は「table:eq(3)」になります。

&nbsp;

制御方法は色々あります。

・モーダルを閉じる度にモーダル要素を削除する（毎回新規作成）

・table要素の個数（length）でeqの引数を変える

・$(table:eq(2))での取得ではなく、table要素の個数に依存しない方法でサブテーブルを取得する

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2812](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Legacy\_Account2812](https://community.cybozu.dev/u/Legacy_Account2812)\
**Post date:** [2022 年 5 月 29 日午前 7:54 UTC](https://community.cybozu.dev/t/topic/6007/5 "2022-05-29T07:54:30Z")

</div>

[koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)さま

&nbsp;

ご教授いただきありがとうございました。

> ・$(table:eq(2))での取得ではなく、table要素の個数に依存しない方法でサブテーブルを取得する

上記より、setFieldShownを用いてテーブル項目を非表示することができました。

（サブテーブルもsetFieldShownを用いて非表示できることが確認不足でした…）

モーダルウィンドウも正常に動作できました。

ありがとうございました。

以上、よろしくお願いします。