jQueryでプロパティ指定(data属性)がうまくいかない

Question

現在node.jsでpug・sass・jqueryを利用し、サイトの模写をしています。

ボタンクリック後、グローバルメニューを表示するようにしたいのですが、data属性をプロパティ指定するとうまくいきません。
直接指定した場合は、きちんと反応するようです。

どなたか解決方法をご存知の方がいましたら、ご回答よろしくお願い致します。

import $ from 'jquery';

let trigger = {};
trigger = {
  spmenu: $('[data-trigger-spmenu]'),
};

let target = {};
target = {
  spmenu: $('[data-target-spmenu]'),
};

const spMenuEvt = () => {
  //クリック反応なし
  trigger.spmenu.on('click', () => {
    console.log("success");
    $('[data-target-spmenu]').toggleClass('is-active');
  })
  //クリック反応あり
  $('[data-trigger-spmenu]').on('click', () => {
    console.log("success");
    $('[data-target-spmenu]').toggleClass('is-active');
  });
};

$(function () {
  spMenuEvt();
});

//ボタン部分(クリック後、is-activeクラスを付与)
.l-spMenu-btn(data-trigger-spmenu="trigger")
　　　　・
　　　　・
　　　　・

//表示部分（is-activeクラスを追加することで表示）
.l-spMenu-groval(data-target-spmenu="target")
　　　　・
　　　　・
　　　　・

Comments

[miyabi_pudding]

質問タグにNode.jsとあり、
import文にて、jQueryを読み込んでおりますが、なにか、フロントエンドフレームワークをお使いですか？
それならば、そのフレームワークを使用していることを質問に記載することと、質問タグに追加いただかないと、回答は得られないかと。
また、そうであってもそうでなくても、HTMLの掲示もしてください。
JavaScriptだけでは状況が見えません。

[moko888]

情報不足ですみません。質問修正しました。

Answer 1

$('[data-trigger-spmenu]')は「そのコードが書かれた位置で読み込める要素」を保持します。ロードが終わっていない場所で定義しても何も持ちません。

let trigger = {};
let target = {};
$(function () { // ← これの意味を調べてみましょう
  trigger = {
    spmenu: $('[data-trigger-spmenu]'),
  };
  target = {
    spmenu: $('[data-target-spmenu]'),
  };
  spMenuEvt();
});

Comments

[moko888]

data属性は「そのコードが書かれた位置で読み込める要素」なのですね...知識不足でした。
jsファイルの読み込みを、headからbodyの最後尾に変更することで解決しました。本当にありがとうございます！

Answer 2

jsファイルの読み込みを、headからbodyの最後尾に変更することで解決しました。