關閉/重新打開模式後Javascript不工作

Question

我在使用我正在開發的yii2項目中的引導模式中的JavaScript文件時出現問題。我有一個模態框，用於通過ajax加載模態的主體。在其中一個視圖中，我註冊了一個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個，將其剪下以保持可讀性）。其中一個子視圖的例子是...

<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> 

是否有我需要做的重新加載JavaScript文件？任何幫助深表感謝。

Answer 1

試試這個：

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