Как использовать onchange, когда Id генерируется динамически, используя Dynami c Form YII2 - PullRequest
0 голосов
/ 04 апреля 2020

У меня есть несколько раскрывающихся списков, идентификатор которых генерируется автоматически с помощью wbraganca Dynami c Форма, например: Первый-раскрывающийся список будет иметь такой идентификатор, как: # formquestion-0-formquestiontypeid, Второй-раскрывающийся список будет иметь Идентификатор, такой как: # formquestion-1-formquestiontypeid, n-dropdown будет иметь идентификатор, такой как: # formquestion- (n-1) -formquestiontypeid

Я хочу вызывать ONCHANGE в каждом раскрывающемся списке. Но я не знаю идентификатор, потому что идентификатор генерируется автоматически формой wbraganca Dynami c.

$('#formquestion-{$i}-formquestiontypeid').change(function(){console.log('enter');});

Я пробовал этот код jquery внутри формы Dynami c For Loop Но jquery только ответ на выпадающий список с идентификатором: # formquestion-0-formquestiontypeid

<?php
    foreach ($formQuestionModels as $i => $formQuestionModel): 
?>
  <div class="item panel panel-default">
    <!-- widgetBody -->
    <div class="panel-heading">
      <h3 class="panel-title pull-left">Question</h3>
      <div class="pull-right">
        <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
        <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
        <?php 
                  $Formquestiontype=Formquestiontype::find()->all();
                  $listData=ArrayHelper::map($Formquestiontype,'formQuestionTypeID','formQuestionTypeName');

                  echo $form->field($formQuestionModel, "[{$i}]formQuestionTypeID")->dropDownList(
                          $listData,
                          [   
                              'class' => "",
                              'prompt' =>'Select...'
                          ]);                          

                  $this->registerJs("                                         
                      $('#formquestion-{$i}-formquestiontypeid').change(function(){
                          var value = this.value;
                          console.log(value);
                      });

                  ");
              ?>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="panel-body">
      <?php
              // necessary for update action.
              if (!$formQuestionModel->isNewRecord) {
                  echo Html::activeHiddenInput($formQuestionModel, "[{$i}]id");

              }
          ?>
        <?= $form->field($formQuestionModel, "[{$i}]formQuestionName")->textInput(['maxlength' => true]) ?>
          <div class="row">
            <div class="col-sm-6">
              <?= $form->field($formQuestionModel, "[{$i}]formDescription")->textInput(['maxlength' => true]) ?>
            </div>
            <div class="col-sm-6">
              <?= $form->field($formQuestionModel, "[{$i}]formRequired")->textInput(['maxlength' => true]) ?>
            </div>
          </div>
          <!-- .row -->
          <div class="row">
            <div class="col-sm-4">
              <!-- <?= $form->field($formQuestionModel, "[{$i}]formQuestionTypeID")->textInput(['maxlength' => true]) ?> -->
            </div>
            <div class="col-sm-4">
              <?= $form->field($formQuestionModel, "[{$i}]formImage")->textInput(['maxlength' => true]) ?>
            </div>
            <div class="col-sm-4">
              <?= $form->field($formQuestionModel, "[{$i}]formQuestionPosition")->textInput(['maxlength' => true]) ?>
            </div>
            <div class="col-sm-4">
              <?= $form->field($formQuestionModel, "[{$i}]formQuestionSection")->textInput(['maxlength' => true]) ?>
            </div>
          </div>
          <!-- .row -->
    </div>
  </div>
  <?php endforeach; ?>

1 Ответ

0 голосов
/ 06 апреля 2020

Этот вопрос решен, мне просто нужно вставить все мои jquery внутри этого JQUERY кода:

jQuery(".dynamicform_wrapper").on("afterInsert", function(e, item) {
    jQuery(".dynamicform_wrapper .panel-title").each(function(index) {
        // Insert your code (javascript, JQUERY, etc) here
    });
});
...