Javascript + Drupal

Question

My setup: A "open video" button. A form, when user clicks handouts or videos, ajax is called to render the files with the buttons.

My question is:

When I render the page and click on "open the video", I have to click out twice to exit. I assume it is because ModalVideo is being called twice, once when it rendered and once when the form is submitted. I was wondering if anyone has any pointers or references to drupal behaviors on forms/javascript being ran once. Thank you.

Drupal.behaviors.customJS = {
  attach: function(context, settings){
     // import ModalVideo from 'modal-video';
     new ModalVideo(".js-video-vimeo-btn",{channel:'vimeo'});
  }
}

------UPDATED SOLUTION-------

 Drupal.behaviors.customJS = {
  attach: function(context, settings){
     //every time the view is updated on ajax call, run only once
     $('.view-pdf-views').once(function(){
         // import ModalVideo from 'modal-video';
        new ModalVideo(".js-video-vimeo-btn",{channel:'vimeo'});
     });
  }
 }

Answer 1

You have to use once() plugin that is delivered to Drupal. Check JS API Overview

Answer 2

If you are using .on() to listen for button click you should change it to .one()

http://api.jquery.com/one/