【Drupal】jsクリック機能が複数回実行されるのはなぜか?

memo-post

最も重要なことは、JQueryのセレクタコンテキストを使用することです。そうしないと、Drupalのビヘイビアが処理するためのコンテキストだけを渡したときに、いつでもDOM全体をあなたのjsコードに走らせてしまうことになります。

それでも関数が複数回実行される場合は、一意な識別子を持つ once() を追加します。

$('input.myCustom', context).once('mySecondBehavior').each(function () {} )

mytheme.libraries.yml に core/jquery.once ライブラリを追加することを忘れないでください。

https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview を参照してください。

私たちのプロジェクトで何かを解決しているときに、この投稿に出会いました。プラットフォームの柔軟性により、ウィジェットなどをボディ内のほぼどこにでも配置できるため、複数のイベントを $(‘body’, context) にバインドしています。

$(‘body’, context).on(‘click’, ‘.modal-trigger’, function (e) {}); を使用すると、クリックイベントが body 2x にバインドされる原因となっていました。

単に $(‘body’, context).once().on(‘click’, ‘.modal-trigger’, function (e) {}); を使用すると、最後にアタッチ/ロードされたスクリプトだけがボディにバインドされてしまい、他のスクリプトイベントがアタッチされないという結果になりました。

各スクリプトに一意な識別子を持つ .once() を追加することで、この問題は見事に解決されました。

Drupal.behaviors.SigmaModal = {

    attach: function (context, settings) {

      // Trigger sigma dialog on click.
      $('body', context).once('SigmaModal').on('click', '.sigma-modal-trigger', function (e) {

第2モーダルスクリプト

Drupal.behaviors.DisplayModal = {

    attach: function (context, settings) {

      // Trigger generic dialogs on click.
      $('body', context).once('DisplayModal').on('click', '.modal-trigger', function (e) {

タイトルとURLをコピーしました