如何访问JS/jQuery生成的动态元素？Bootstrap-table初始化前设置select默认值

问题场景 #

用jQuery 3.6搭配Bootstrap-table 1.21.3开发时，需要在Bootstrap-table开始渲染前，给id为jails的select控件设置默认选中值。

已经搞定了select的change事件逻辑，但页面加载时死活设置不上默认值；试过各种方法访问动态生成的option元素，全失败了。

解决方法 #

最终把AJAX的async属性设为false就解决了——原因很简单，AJAX默认是异步模式，这时候设置默认值的代码会在AJAX请求完成、option元素生成前执行，自然找不到元素。把async改成false后，AJAX会同步执行，等动态option生成完毕，再去设置默认值就能正常访问元素了。

代码示例 #

原来的异步AJAX（无法生效）

$.ajax({
  url: '/api/get-options',
  type: 'GET',
  success: function(res) {
    // 动态生成select的option
    $.each(res.data, function(i, item) {
      $('#jails').append(`<option value="${item.id}">${item.name}</option>`);
    });
  }
});
// 此时AJAX还没完成，option还没生成，设置无效
$('#jails').val('target-value');

修改后的同步AJAX（正常生效）

$.ajax({
  url: '/api/get-options',
  type: 'GET',
  async: false, // 核心修改：开启同步模式
  success: function(res) {
    // 动态生成select的option
    $.each(res.data, function(i, item) {
      $('#jails').append(`<option value="${item.id}">${item.name}</option>`);
    });
  }
});
// AJAX执行完毕，option已生成，可正常设置默认值
$('#jails').val('target-value');

内容的提问来源于stack exchange，提问作者Dmitry