javascript - 如何在 Ajax 响应后从 select 标签中获取 html 格式的值？

Question

目的:我在 Jquery 中使用 Ajax 创建一个下拉列表，以从数据库中选择数据并以 html 格式发送到 html。

问题:在 Ajax 响应后，我无法在下拉列表中使用任何选择器。

描述:我使用 PHP 从数据库中选择城市并使用选择标签回显 ( <selection></selectio> ) 制作下拉菜单并使用 #location 将数据从 Ajax 发送到 div 标签以在浏览器中显示给用户。我的下拉菜单工作得很好但我做不到使用 #testing 选择器在用户更改每个下拉列表的任何值后发出警报。

PHP 函数

public function select_cat($table = FALSE, $where = FALSE) {

        $this->db->select('*');
        $this->db->from($table);
        if ($where) {
            $this->db->where($where);
        }
        $q = $this->db->get();
        if ($q->num_rows() > 0) {
            echo '<select id="testing" name="p_locat" class="form-control" id="p_locat">';
            foreach ($q->result() as $row) {
                echo "<option value=" . $row->l_id . ">" . $row->city . "</option>";
            }
            echo '</select>';
        } else {
            return FALSE;
        }
    }

这是我的 Ajax

   $(document).ready(function(){
    $.ajax({
      url: "<?php echo base_url('ads/get_locat'); ?>",
      data: {'<?PHP echo $this->security->get_csrf_token_name(); ?>': '<?PHP echo $this->security->get_csrf_hash(); ?>'},
      dataType: "html",
      cache: false,
      success: function (data) {
      console.log(data);
      $("#location").html(data);
     }
    });
   })

在用户点击每个下拉菜单后调用Alert()(文档中的所有 JS)

$("#testing").on('change',function(){
        alert($("#p_locat"));
    })

这里是div标签

<div id="location"></div>

Answer 1

要将元素动态添加到 DOM，您需要按如下方式 $(document):

$(document).on('change',"select#testing",function(){
 alert($('#testing option:selected').val());
//Write stuffs
});