Javascript 如何使用ajax获取动态创建的广播框

我有两个无线电输入字段，它们是通过从数据库运行一些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  .// -->

---

我想，

。在（“单击”，“protduct”类型）

上，即使HTML是在页面加载后创建的，也应该能够找到它。

我从上面的代码构建了这个小片段。我删除了

产品类型

ID，现在使用

$（文档）中的类选择器
。自定义控件输入
。在（'click'，…）

上演示事件处理程序将在动态生成的元素上启动

$（文档）
.on（“单击“，”。自定义控件输入“，
函数（e）{console.log（'do st with value='+$（this.val（））
})//仅为演示添加按钮：
.on（“单击“，”添加BTN“，
职能（e）{
设p=$（this.prev（），opt=p.children（':last'）.clone（）；
opt.find（'input'）.val（+opt.find（'input'）.val（）+1）；
设d=opt.find（'div'）；
d、 text（parseInt（d.text（））+1+'.product type'）
p、 附加（opt）；
});

1.产品类型
2.产品类型
添加选项
您似乎正在使用PHP代码生成具有相同id的多个元素。这是无效的HTML，将导致（'click'，…）

处理程序只影响它的第一次出现。使用

class

来识别您的DOM元素。@cars10m谢谢您的帮助-我本应该发现这一点，但它甚至没有发现第一次出现的情况-它根本就没有击中这一点。

$(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 */
        
      }
    });
  });