Как получить динамически созданный радиобокс, который можно поднять с помощью ajax

Question

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

HTML / PHP

<article class="filter-group">
    <header class="card-header">
        <a href="#" data-toggle="collapse" data-target="#collapse_1" aria-expanded="true" class="">
            <i class="icon-control fa fa-chevron-down"></i>
            <h6 class="title">Product type</h6>
        </a>
    </header>
    <div class="filter-content collapse show" id="collapse_1" style="">
        <div class="card-body">

        <?php 
        foreach ($getproduct as $product_type_row) {
        $product_type = $product_type_row['description'];
        $product_type_id = $product_type_row['product_type_id'];
        
        echo    '<label class="custom-control custom-radio">
                <input type="radio" name="product_type" checked="" id="product_type" value="'.$product_type_id.'" class="custom-control-input">
                <div class="custom-control-label">'.$product_type.' </div>
                </label>';
        }
        ?>
        </div> <!-- card-body.// -->
    </div>
</article> <!-- filter-group  .// -->

JS

$(document).ready(function(){

  $(document).on("click", "#product_type", function(e){

    $.ajax({
      type: "POST",
      url: "include_search/search_get/search_criteria_get.php",
      data:{id:$(this).val(),
        manufacturer_id:$('#manufacturer').val()}, 
      dataType: 'json',
      beforeSend :function(){
    
       //BEFORE SENDING DATA RESET MENUS

      },                         
      success: function (data) {
        /*get response as json */


         //SUCCESS DATA SENT .. SET MENUES

        /*ends */
        
      }
    });
  });

я подумал, что .on("click",#protduct_type) должен уметь подобрать это, даже если HTML были созданы после загрузки страницы?

Любые указатели будут очень полезны.

Спасибо,

Ричард

Answer 1

Я создал этот небольшой фрагмент из приведенного выше кода. Я удалил идентификаторы product_type и теперь использую селектор классов .custom-control-input в $(document).on('click',...), чтобы продемонстрировать, что обработчик событий будет запущен, в том числе и для динамически генерируемых элементов.

$(document)
 .on("click",".custom-control-input",
   function(e){console.log('do st with value='+$(this).val())
 }) // add-button for demo only:
 .on("click","#addbtn",
   function(e){
   let p=$(this).prev(),opt=p.children(':last').clone();
   opt.find('input').val(+opt.find('input').val()+1);
   let d=opt.find('div');
   d.text(parseInt(d.text())+1+'. product type')
   p.append(opt);
 });

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<article class="filter-group">
<header class="card-header">
    <a href="#" data-toggle="collapse" data-target="#collapse_1" aria-expanded="true" class="">
        <i class="icon-control fa fa-chevron-down"></i>
        <h6 class="title">Product type</h6>
    </a>
</header>
<div class="filter-content collapse show" id="collapse_1" style="">
    <div class="card-body">

<label class="custom-control custom-radio">
<input type="radio" name="product_type" checked="" value="123" class="custom-control-input">
<div class="custom-control-label">1. product type</div>
</label>
<label class="custom-control custom-radio">
<input type="radio" name="product_type" value="124" class="custom-control-input">
<div class="custom-control-label">2. product type</div>
</label>
    </div> <!-- card-body.// -->
<button id="addbtn">add option</button>
</div>

</article>