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

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>

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

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

我需要<span>使用 jQuery 获取包含新动态更新的 SKU 的标签的值。我尝试了以下 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
    });
}