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

Question

另一个“根据所选的父选项动态更改选择选项”的问题。

我的选择值动态变化 - 但在我对子选择进行 Rails 渲染后 - 我失去了 Chosen 样式(jQuery Chosen 插件)，我无法对这个新注入(inject)的元素进行操作。

这里是代码现在的地方——它已经经历了几十次迭代——

$('#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 已经加载，所以我猜它不会“看到”这个元素。

此外 - Chosen 插件不会在元素上呈现。不确定为什么 - 可能是同样的原因。

我正在使用 jQuery 的 .on() 就像 SO 上的每篇文章都说的那样。但它不会“重新加载”此父项中的元素(并且“vendor_block”是“vendor_name”和“vendor_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 - 但 Chosen 在加载 DOM 时执行以下操作:

<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>

这一切都很好 - 这是应该发生的事情。

这是注入(inject)选择框后的原始 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>

Answer 1

我在这里找到了答案:

Is there a way to dynamically ajax add elements through jquery chosen plugin?

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

我的 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);
          }
        });

因此，我们甚至不必担心从注入(inject)的元素中重建所选元素 - 我们只需使用内置的“更新”触发器，效果很好。