title: Javascript not working after closing/reopening modal
body: <p>I'm having an issue with using javascript files within a bootstrap modal in a yii2 project I am working on. I have a modal box with the view used for the body of the modal being loaded through ajax. In one of the views I have registered a javascript file to disable certain form inputs depending on a few conditions. The first time I load the modal, the javascript functions without any issues. However, if I close the modal and reopen it, the javascript is no longer working until I refresh the entire page.</p>
  
  <p>I've tried clearing out the content of the modal entirely using</p>
  
  <pre><code>$("#modal").on('hide.bs.modal', function(e){
      var contentArea = $(this).find('#modalContent');
      contentArea.html('');
  });
  </code></pre>
  
  <p>but it the javascript still does not function upon reopening the modal.</p>
  
  <p>This is the code that defines the modal </p>
  
  <pre><code>&lt;?php 
    Modal::begin([
      'header'=&gt;'&lt;h4&gt;Event&lt;/h4&gt;',
      'id'=&gt;'modal',
      'size'=&gt;'modal-lg',
      'options'=&gt;[
          'tabindex'=&gt;false
      ]
    ]);
  ?&gt;
    &lt;div id="modalContent"&gt;&lt;/div&gt;
  &lt;?php Modal::end(); ?&gt;
  </code></pre>
  
  <p>And the page being loaded into the modal...</p>
  
  <pre><code>&lt;?php
    $this-&gt;registerJsFile('@web/js/registration.js');
  ?&gt;
  &lt;div class="registrant-create"&gt;
  &lt;?php $form = ActiveForm::begin([
     'id'=&gt;$model-&gt;formName(),
     'action'=&gt;['create-payment'],
     'enableAjaxValidation'=&gt;true,
     'validationUrl'=&gt;['/event/registrant/validate-registrant','event_id'=&gt;$model-&gt;event_id],
     'options'=&gt;['data-pjax'=&gt;true],
  ]); ?&gt;
  &lt;input type="hidden" name="form_page" value="level" id="form_page" /&gt;
  &lt;div id="page-level"&gt;
      &lt;?=$this-&gt;render('_form_level', [
          'form' =&gt; $form,
          'model' =&gt; $model,
          'model_code'=&gt;$model_code,
          'list_levels' =&gt; $list_levels,
          'list_members' =&gt; $list_members,
      ])?&gt;
  &lt;/div&gt;
  &lt;div id="page-attendee"&gt;
      &lt;?=$this-&gt;render('_form_attendee', [
          'form' =&gt; $form,
          'model' =&gt; $model,
          'model_organization' =&gt; $model_organization,
          'models_attendee' =&gt; $models_attendee,
          'models_personal' =&gt; $models_personal,
          'models_personalEmail' =&gt; $models_personalEmail,
          'models_email' =&gt; $models_email,
          'models_answer' =&gt; $models_answer,
      ]);?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The sub-views being rendered contain the fields for the individual form pages (theres 4 in total, cut it down to keep it readable). An example of one of the subviews would be...</p>
  
  <pre><code>&lt;div class="alert alert-info"&gt;
      Instructions... 
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;?= $form-&gt;field($model, 'level_id',['options'=&gt;['class'=&gt;'col-lg-5']])-&gt;dropDownList($list_levels['items'],['options'=&gt;$list_levels['attributes']])-&gt;label("Select a level"); ?&gt;
      &lt;?= $form-&gt;field($model_code, 'code',['options'=&gt;['class'=&gt;'col-lg-5']])-&gt;label("Enter a registration code")?&gt;
  &lt;/div&gt;
  &lt;?= $form-&gt;field($model, 'member_id','inputOptions'=&gt;['data-disabled'=&gt;true]])-&gt;dropDownList($list_members)-&gt;label("Select a member"); ?&gt;
  
  
  &lt;div class="form-group"&gt;
      &lt;?= Html::button('Continue', ['class' =&gt; 'btn btn-primary btn-block btn-lg form-continue', 'data-next'=&gt;'attendee'])?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there something I need to do to reload the javascript file? Any help is much appreciated.</p>