如何使用jquery将Ajax结果正确附加到现有ul，li

Question

我已经检查了所有先前对建议问题的答案，但无法弄清楚自己在做什么错。

目前，我正在使用以下代码进行ajax调用：

  $(".pricingCalculator").ready(function(){

   $('#size li').on('click', function(){

    if($(this).text() != '')
    {
      var productId =  $(this).attr("value");

      // here we'll make ajax call to post details of dropdown and get new data
     $.ajax({
      url:"{{ url('product_details/fetch/productId') }}".replace("productId", productId),
      dataType: "json",
      success:function(result)
      {
      // clear the drop downs so no data will be there
      $("ul[data-dependent='quantity']").empty();

      // add quantity drop down based on selected size
      $.each(result.productQuanties, function(i, item) {
      $("ul[data-dependent='quantity']").append("<li value=" + item.quantity_name + "><span>" + item.quantity_name + "</span></li>");
      })

      // add stock options based on selected size
      $.each(result.productPaperStock, function(i, item) {
      $("ul[data-dependent='stock']").append("<li value=" + item.name + "><span>" + item.name + "</span></li>");
      })
      //$("ul[data-dependent='quantity']").html(productQuantity);
      }
     })
    }
   });

我的ajax调用返回正确的数据，并创建li和在html中可见的值。这是插入li之前的html块的示例。

  <div class="block-options col-md-4 col-sm-5">
    <div class="options-col">
      <span class="cur-option-w">
        <span class="cur-option-val">Quantity</span>
        <i class="fa fa-angle-down"></i>
      </span>
      <ul class="d-none po-list" name="quantity" id="quantity" data-dependent="quantity">
        <li><span>Please select size</span></li>
      </ul>
    </div>
  </div>
</div>

在插入ajax数据后，我将得到这样的列表。

问题是我无法选择该数据。通过选择，我的意思是简单地单击它并将其突出显示。我阅读了有关绑定的内容，但无法弄清楚自己在做什么错。这里有几个问题，涉及如何附加jquery ajax以及有关绑定元素的问题。