Блог

Главная - Вопросы по программированию - Как получить входное значение класса с помощью jquery, входные данные поступают от контроллера

Как получить входное значение класса с помощью jquery, входные данные поступают от контроллера

#php #html #jquery

#php #HTML #jquery

Вопрос:

В приведенном ниже примере в контроллере поля ввода динамически поступают с сервера и отображаются на странице просмотра через ajax

 public function Testing() {
    $query =.....;
    $result = $query->result_array();
    $i=1;

    foreach ($result as $row) {
        echo '<div class = "readingparent">
            <div class="form-group">'.$row['cm_name'].'</div>
            <div class="form-group">
                <input type="text" class="form-control prev-'.$i.'" placeholder="" onkeypress="return isNumber(event)">
            </div>
            <div class="form-group">    
                    <input type="text" class="form-control present-'.$i.'" placeholder="" onkeypress="return isNumber(event)">   
            </div>
            <div class="form-group">    
                    <input type="text" class="form-control reading" id="reading-'.$i.'" placeholder="" onkeypress="return isNumber(event)">   
            </div>
        </div>';

        $i  ;
    }
}

Эти входные данные отображаются на странице просмотра с помощью ajax $('.testingnew').html(data); .
Проблема в том, что я не получил второе входное значение после первого ввода.

 $(document).ready(function () {
    for (var i=1; i<4; i  ) {
        $(document).on('keyup','.prev-' i,function( e ) {
            var prev = $(this).val();
            // alert(prev);
            var present = $('.present-' i).val();
            // var present = $(document).val($('.present-' i).val());
            // var present = $(document).on("trigger", '.present-' i).val();
            // var present = document.getElementsByClassName( '.present-' i ).value;
            // var present = $(document).on('trigger','.present-' i).val();
            // var present = $(document).on('change','.present-' i).val();
            alert(present);
      });
    }
});

Комментарии:

1. Это странный способ использования делегирования событий … Эти элементы должны иметь один общий класс, и должен быть один обработчик ввода, отслеживающий событие, происходящее с элементами с этим классом, добавленным в документ.

Ответ №1:

На самом деле, ваш код выполняется без ошибок, проблема в ваших обработчиках, это называется closure:

 function( e ) { 
  ...
  var present = $('.present-' i).val();
  alert(present);
}

Все ваши обработчики будут сохранять и использовать одну и ту же ссылку i , во время запуска обработчика он выполняет поиск в своей лексической области и использует ссылку i = 4 . Таким образом, значение '.present-' i всегда будет .present-4 , и это заставляет вас думать, что код не будет выполняться.

Это можно легко исправить, используя меньшую область блока:

 for (var i=1; i<4; i  ) {
  const j = i;
  // use the reference of `j` instead of `i`
  $(document).on('keyup','.prev-'  j,function( e ) {
    var present = $('.present-'  j).val();
    alert(present);
  }
}```
Метки: