获取由选择框动态更改的跨度值

Question

我的电子商务网站<span>包含产品详细信息页面上每种产品的SKU，如下所示：

<span class="VariationProductSKU">052077</span>

当客户在以下<select>菜单中选择尺寸时...

<div class="productOptionViewSelect">
     <select id="4ab0094cccc675de3daaa83d6b1819e2" class="validation" name="attribute[110]">
          <option selected="selected" value=""> -- Please Choose an Option -- </option>
          <option value="69">S</option>
          <option value="70">M</option>
          <option value="71">L</option>
          <option value="72">XL</option>
          <option value="73">XXL</option>
     </select>
</div>

<span>标签中显示的SKU动态更新如下（在本例中，他们选择了大小“L”）：

<span class="VariationProductSKU">052077.L</span>

我需要使用jQuery获取包含新动态更新SKU的<span>标记的值。我尝试过以下jQuery代码，但似乎总是将<span>标记的先前值传回给我，而不是新值。

if ($('div.productAttributeList').html() !== ''){
    $("div.productOptionViewSelect select").on( 'change', function () {
         var val = "";
         val = $('span.VariationProductSKU').text().trim();
         alert(val);
    });
}

如果能够了解如何从<span>代码中获取正确的值，我们将不胜感激！

Answer 1

尝试等待远程脚本完成：

if ($('div.productAttributeList').html() !== '') {
    $("div.productOptionViewSelect select").on('change', function () {
        var val = "";

        setTimeout(function() {
            val = $('span.VariationProductSKU').text().trim();
            alert(val);
        }, 50); // adjust this value until it's working reliably
    });
}