2【Elementor Pro】popupにjavascript(jQuery)を追加しても動かない場合の解消方法

【Elementor Pro】popupにjavascript(jQuery)を追加しても動かない場合の解消方法 WordPress

追加したjQueryのイベントハンドラが動かない

popupでモバイル(スマートフォン)メニューを作成する際、アコーディオン機能のするために、jQueryを記述してもイベントハンドラが動きませんでした。

追加したい機能と動作状況

モバイル(スマートフォン)メニューの階層に、親要素をクリックしたら子階層を表示させるための、アコーディオン機能を追加。
chromeのコンソールではエラーが出ていない状態で、クリックしても何も変化なし(イベントが動かない)

イベントハンドラが動かない原因と解消方法

「ポップアップが開いた/表示されたとき」に、JavaScriptベースの要素を初期化する必要があるようです。

以下の記述でイベントが動作しました。

イベント追加 記述方法

使用法は非常に簡単です。たとえば、ポップアップで開いたイベントを追跡するなど、コールバックを使用して目的のイベントにイベントリスナーを追加(公式サイトより翻訳)。

jQuery( document ).on( 'elementor/popup/show', () => {
	// 追加したい機能
} );

参考)

Elementor公式サイト
Elementor Pro 2.7: Popup Events

GitHubの質問スレッド
Elementor popup event handler not working #10690

具体的な記述

WordPressのメニューの階層にアコーディオン機能を追加。

jQuery(document).on("elementor/popup/show", () => {
  jQuery(".menu-item-has-children a").on("click", function () {
    jQuery(".sub-menu").slideUp(500);

    var findElm = jQuery(this).next(".sub-menu");

    if (jQuery(this).hasClass("close")) {
      jQuery(this).removeClass("close");
    } else {
      jQuery(".close").removeClass("close");
      jQuery(this).addClass("close");
      jQuery(findElm).slideDown(500);
    }
  });
});
タイトルとURLをコピーしました