更改事件不会在ajax加载的元素上触发

当我点击第一个装入ajax的项目时，第二个ajax调用更改事件无效。 我怀疑我的$ name1是否在第二个ajax data:{name1: name1},

落下

  Select Product  

当变量位置可用时，第一个ajax调用将填充下拉框

    $.ajax({ type: "POST", data: {place: ''}, url: 'listplace.php', dataType: 'json', success: function (json) { if (json.option.length) { var $el = $("#name"); $el.empty(); // remove old options $el.append('Select language value'); for (var i = 0; i < json.option.length; i++) { $el.append($('', { value: json.option[i], text: json.option[i] })); } }else { alert('No data found!'); } } });  

//单击选项时继续第二次ajax调用，它将列出产品详细信息

   $("#name").on('change',function (e) { var name1 = this.value; $.ajax ({ data:{name1: name1}, type: 'POST', url: 'dataprod.php', success: function (response) { console.log(response); $('.products-wrp').html(''); $('.products-wrp').hide(); $('.products-wrp').html(response); $('.products-wrp').show(); }, }); });   

dataprod.php

 query("SELECT product_name, product_desc, product_code, product_image, product_price FROM products_list where product_name='$name1'"); $products_list = '
'; while($row = $results->fetch_assoc()) { $products_list .= <<<EOT 
 
 
{$row["product_name"]}
 
  
 
Price : {$currency} {$row["product_price"]}
  
 EOT; } $products_list .= '