JQuery, предназначенный для конкретных экземпляров клонированного HTML для поиска и результатов поиска php

Question

Я новичок в JQuery, но я собрал код для поиска jquery по выбору изменения рядом с кодом для добавления/удаления кнопок экземпляра, причем идея заключается в том, что пользователь выбирает запись в раскрывающемся списке, и страница возвращает таблицу, содержащую информацию в базе данных. При необходимости пользователь может нажать кнопку, чтобы добавить копию выпадающего списка и выбрать другую запись и т. Д.

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

Что было бы лучшим способом обеспечить, чтобы каждая клонированная группа действовала независимо от другой?

 $(document).ready(function() { 
     // Am I correct in thinking that if this variable is read on load it will never update and always be 1 as there are no other cloned inputs. 
     var num = $('.clonedInput').length; 

     $('#issue-drop' + num).change(function() { 

      var qString = 'id=' +$(this).val(); 
      $.post('sub_db_handler.php', qString, processResponse); 

     }); 

     function processResponse(data) { 
      $('#results' + num).html(data); 
     } 

    }); 

Вот пример моих форм сгенерированного исходного

<div id="issues-wrap1" style="margin-bottom:4px;" class="clonedInput"> 
      <select name="Issues[]" id="issue-drop1"> 
       <option selected>Please Select...</option> 
       </select> 
      <div id="results1"> 

      </div> 
     </div> 

<!-- Second div starts here --> 

<div id="issues-wrap2" style="margin-bottom:4px;" class="clonedInput"> 
      <select name="Issues[]" id="issue-drop2"> 
       <option selected>Please Select...</option> 
       </select> 
      <div id="results2"> 

      </div> 
     </div> 

Answer 1

Вы должны использовать делегирование: {увидеть, если его работы для вас}

$(document).on('change','.clonedInput select',function() { 

     var data = {id: $(this).val()}; 
     $.post('sub_db_handler.php', data, processResponse); 

    }); 

Answer 2

$('.clonedInput').length; 

Эта строка возвращает номер элемента с классом «clonedInput» на вашей странице. В этом случае «2». Вы должны сделать «for», чтобы вы могли добавлять события к каждому элементу.