能否使用jQuery对AJAX成功回调中生成的HTML元素进行操作？

别担心，这是非常常见的操作场景——当AJAX成功回调触发时，你通过append()添加的HTML元素已经被插入到DOM树里了，jQuery完全可以定位到它们并执行各种操作。

两种常见的操作方式： #

1. 直接在append后操作元素
   就在你追加完HTML的代码后面，直接用jQuery选择器选中新元素就行。比如针对你给出的代码，你可以这么做：

   $.ajax({
     url: '你的请求地址',
     success: function(response) {
       // 先把HTML追加到页面
       $('#cmp').append(
         '<div id="lt">Give Your Priority Here</div>' +
         '<br/><br/>' +
         '<div id="drp" class="lt1">' +
         '<table>' +
         '<tr class="select1" id="drp1">' +
         '<td class="select11">' +
         '<select id="select1">' +
         '<option value="" selected disabled>First priority</option>' +
         '<option id="op1" value="Processor">Processor</option>' +
         // 补充你剩下的选项代码
         '</select>' +
         '</td>' +
         '</tr>' +
         '</table>' +
         '</div>'
       );
   
       // 现在直接操作新生成的元素
       // 比如给下拉框绑定change事件
       $('#select1').on('change', function() {
         alert('你选了：' + $(this).val());
       });
   
       // 或者修改文本内容
       $('#lt').text('请选择你的优先级');
     }
   });
   

2. 用事件委托处理动态元素的事件
   如果之后还会动态添加更多类似的元素（比如不止一个select），推荐用事件委托把事件绑定到已经存在的父元素上（比如你的#cmp），这样不管后续添加多少新元素，事件都能生效：

   // 可以放在AJAX外面，页面加载完成后就绑定
   $('#cmp').on('change', '#select1', function() {
     console.log('选中的优先级：', $(this).val());
   });
   

核心原因就是：AJAX成功回调是在元素被插入DOM之后执行的，此时这些新元素已经是DOM的一部分了，jQuery的选择器能正常找到它们，所以各种操作（修改内容、绑定事件、添加样式等）都能正常工作。

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