Javascript jQuery无法识别动态插入的DOM元素？

还有一个“基于父选项选择动态更改选择选项”问题

我的select值是动态变化的——但是在我的rails呈现子select之后——我丢失了所选择的样式（jqueryselected插件），并且我无法对这个新注入的元素进行操作

这就是代码现在的位置-它经过了几十次迭代-

$('#vendor_block').on('change', '#vendor_name', function(){
      overlay.show();
      var v = $(this).val();
      vndr_json = {};
      vndr_json["v"] = v;
      $.ajax({
          type : "GET",
          url : "/purchaseorders/upd_vndr_locs",
          data : vndr_json,
          success: function(res) {
            overlay.hide();
            // console.log(typeof(res),res);
            jQuery("#vndrAddrOpts").html(res);
          }
      });
      $("#vendor_addresses").chosen(); // WHY DON'T YOU RENDER CHOSEN BOX?!
  });

我在我的页面上得到了这个新的选择框，我想在它改变时触发一个事件，但是DOM已经加载了，所以它没有“看到”我猜测的这个元素

另外-所选插件不会在元素上呈现。不知道为什么-可能是同样的原因

我正在使用jQuery的.on（），就像SO上的每一篇文章所说的那样。但它不会“重新加载”此父级中的元素（而“vendor\u block”是“vendor\u name”和“vendor\u addresses”的父div）

您可以在此处的选择框中看到差异：

有什么帮助吗

更新：

在HTML之前和之后添加：

<div id="vndrAddrOpts">
    <select class="chzn-select vndrLocs span12" id="vendor_addresses" name="vendor_addresses"><option value="">Select Location</option></select>
</div>

选择位置

这是原始HTML，但在加载DOM时，Selected会执行以下操作：

<div id="vendor_addresses_chzn" class="chzn-container chzn-container-single chzn-with-drop chzn-container-active" style="width: 100%; margin-bottom: 10px;" title=""><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>Select Location</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off"></div><ul class="chzn-results"><li id="vendor_addresses_chzn_o_0" class="active-result result-selected highlighted" style="">Select Location</li></ul></div></div>

选择位置

这一切都很好，这是应该发生的

这是插入选择框后的原始HTML：

<div id="vndrAddrOpts">
    <select class="chzn-select vndrLocs span12" id="vendor_addresses" name="vendor_addresses"><option value="">Select Location</option></select>
</div>

选择位置

这里是渲染框-无选择的东西

<select class="chzn-select vndrLocs span12" id="vendor_addresses" name="vendor_addresses"><option value="">Select Location</option><option value="532757b4963e6505bc000003">Honolulu</option>
<option value="532768d0963e6505bc000004">Waipahu</option></select>

选择位置檀香山
怀帕胡

我认为所选方法是在元素实际呈现在页面上之前触发的，jQuery找不到它。尝试放入

$（“#供应商地址”）。选择（）作为AJAX成功回调的一部分。如果做不到这一点，请尝试注释掉selected（）方法，运行AJAX脚本，然后手动运行selected（）方法。如果是那样的话，你就得稍微推迟一下

编辑：

实际上，更仔细地看代码，似乎您使用的是ID标记而不是类。多个HTML元素是否具有#供应商#地址id？如果是这样，请改用类，并使用
$（'.vendor_addresses'）.last（）.selected（）。如果使用ID并使用ID选择器，jQuery将在找到具有该ID的元素时选择第一个元素，并在那里停止

要吸取的教训？为唯一元素使用ID，为同一“类”的多个元素使用类。
您正在将ajax调用的结果插入DOM的成功回调，该回调将在每次完成时执行（与脚本的执行无关）。在本例中，您的ajax请求正在发出，代码在开始执行之后，然后是回调。在下一行代码之前调用成功回调的可能性很小，因为ajax调用是一个http请求，比执行一行JavaScript要长得多

您希望将代码放入成功回调中，例如：

      $.ajax({
          type : "GET",
          url : "/purchaseorders/upd_vndr_locs",
          data : vndr_json,
          success: function(res) {
            overlay.hide();
            $("#vndrAddrOpts").html(res);
            $("#vendor_addresses").chosen();
          }
      });

我在这里找到了答案：


实际上，我是以一种过于复杂的方式来处理这个问题的——尝试注入和元素，而不是仅仅从元素开始并向其添加选项

我的AJAX现在看起来像这样：

       $.ajax({
          type : "GET",
          url : "/purchaseorders/upd_vndr_locs",
          data : vndr_json,
          success: function(res) {
            overlay.hide();
            var va = $('#vendor_addresses');
            // console.log(typeof(res),res);
            for (var i=0; i < res.length; i++) {
              va.append(
              $('<option></option>')
                .val(res[i].id)
                .html(res[i].name)
              );  
            }
            va.trigger("liszt:updated");
            // jQuery("#vndrAddrOpts").html(res);
          }
        });

$.ajax({
键入：“获取”，
url:“/purchaseorders/upd_vndr_locs”，
数据：vndr_json，
成功：功能（res）{
overlay.hide（）；
var va=$（“#供应商地址”）；
//控制台日志（类型（res），res）；
对于（变量i=0；i

因此，我们甚至不用担心从注入的元素中重建所选元素——我们只使用内置的“更新”触发器，它工作得很好。
这是一个唯一的ID——问题在于，所讨论的元素被注入页面取决于从第一个选择框中选择的内容。因此，需要重新呈现所选内容。这是我遇到的麻烦。你试过我的第一种药吗？在延迟后手动运行命令？如果您可以在添加新的选择框之前和之后发布表单的一些HTML，这也会很有帮助。我添加了HTML-并且我尝试了您的补救措施（在延迟后运行）-它不起作用。我试着将此作为我的第一次迭代-它不起作用。