モーダルを閉じる/再オープンした後にJavascriptが機能しない

Question

私が取り組んでいるyii2プロジェクトのブートストラップモーダルでjavascriptファイルを使用する際に問題があります。私はajaxを介してロードされているモーダルの本体に使用されるビューを持つモーダルボックスを持っています。ビューの1つでは、いくつかの条件に応じて特定のフォーム入力を無効にするためのjavascriptファイルを登録しています。初めて私はモーダルをロードします.JavaScriptの機能は何の問題もありません。しかし、私がモーダルを閉じてそれを再び開くと、ページ全体をリフレッシュするまでjavascriptは動作しなくなります。

私は完全に

$("#modal").on('hide.bs.modal', function(e){ 
    var contentArea = $(this).find('#modalContent'); 
    contentArea.html(''); 
}); 

を使用して、モーダルの内容を一掃しようとしましたが、それはjavascriptのはまだモーダルの再開時には機能しません。

これはモーダル

<?php 
    Modal::begin([ 
    'header'=>'<h4>Event</h4>', 
    'id'=>'modal', 
    'size'=>'modal-lg', 
    'options'=>[ 
     'tabindex'=>false 
    ] 
    ]); 
?> 
    <div id="modalContent"></div> 
<?php Modal::end(); ?> 

モーダルにロードされるページを定義するコード...

<?php 
    $this->registerJsFile('@web/js/registration.js'); 
?> 
<div class="registrant-create"> 
<?php $form = ActiveForm::begin([ 
    'id'=>$model->formName(), 
    'action'=>['create-payment'], 
    'enableAjaxValidation'=>true, 
    'validationUrl'=>['/event/registrant/validate-registrant','event_id'=>$model->event_id], 
    'options'=>['data-pjax'=>true], 
]); ?> 
<input type="hidden" name="form_page" value="level" id="form_page" /> 
<div id="page-level"> 
    <?=$this->render('_form_level', [ 
     'form' => $form, 
     'model' => $model, 
     'model_code'=>$model_code, 
     'list_levels' => $list_levels, 
     'list_members' => $list_members, 
    ])?> 
</div> 
<div id="page-attendee"> 
    <?=$this->render('_form_attendee', [ 
     'form' => $form, 
     'model' => $model, 
     'model_organization' => $model_organization, 
     'models_attendee' => $models_attendee, 
     'models_personal' => $models_personal, 
     'models_personalEmail' => $models_personalEmail, 
     'models_email' => $models_email, 
     'models_answer' => $models_answer, 
    ]);?> 
</div> 

サブビューがレンダリングされている個々のフォームのフィールドが含まれていますページ（それは4つの合計は、それを読むことを保つためにそれを減らした）。サブビューの1の例は以下のようになり...

<div class="alert alert-info"> 
    Instructions... 
</div> 
<div class="row"> 
    <?= $form->field($model, 'level_id',['options'=>['class'=>'col-lg-5']])->dropDownList($list_levels['items'],['options'=>$list_levels['attributes']])->label("Select a level"); ?> 
    <?= $form->field($model_code, 'code',['options'=>['class'=>'col-lg-5']])->label("Enter a registration code")?> 
</div> 
<?= $form->field($model, 'member_id','inputOptions'=>['data-disabled'=>true]])->dropDownList($list_members)->label("Select a member"); ?> 


<div class="form-group"> 
    <?= Html::button('Continue', ['class' => 'btn btn-primary btn-block btn-lg form-continue', 'data-next'=>'attendee'])?> 
</div> 

は、私はジャバスクリプトファイルをリロードするために必要なものはありますか？どんな助けも大歓迎です。

Answer 1

これを試してみてください。

$(document).on('hide.bs.modal', '#modal' , function(e){ 
    var contentArea = $(this).find('#modalContent'); 
    contentArea.html(''); 
});