JQuery在Select中获取动态生成的选项的值

Question

我试图在动态生成的选择中获取用户在动态生成的选项上选择的选项的值。现在我只是想弹出一个警报，但完全没有成功。

我已经尝试在 docuement.ready 中使用 .change 活页夹，但这没有用，我认为这可能是因为元素不存在以供其绑定。 .change的代码

$(document).ready(function () {
    $(".lowerSerialSelect").change(function () {
        alert("red")
    });
});

这是我用来动态生成选择的代码：

if (_interface == "network" && _deviceName == "Not in Use")
    {
        var lowerSerialTd = document.createElement("td");
        lowerSerialTd.className = "lowerSerial";
        trTag.appendChild(lowerSerialTd);
        var lowerSerialSelect = document.createElement("select");
        lowerSerialSelect.className = "lowerSerialSelect";
        lowerSerialSelect.name = "lowerSerial" + identifier;
        lowerSerialSelect.id = _interface + "lowerSerial" + identifier;

        var lowerSerialOption = document.createElement("option");
        lowerSerialSelect.appendChild(lowerSerialOption)

        for (newDevice in newNetworkDevices)
        {
            alert(newNetworkDevices[0]);
            var lowerSerialOption = document.createElement("option");
            lowerSerialOption.innerHTML = newNetworkDevices[newDevice][0];
            lowerSerialOption.className = "networkMacOption";
            lowerSerialOption.id = _interface + "lowerSerial" + identifier;
            lowerSerialOption.value = newNetworkDevices[newDevice];
            lowerSerialSelect.appendChild(lowerSerialOption)
        }

        lowerSerialTd.appendChild(lowerSerialSelect);
        alert("Maybe");
    }

那么 .change 不会绑定到尚未创建的元素上吗？

如果是这样，我可以通过每次创建新选择时重新绑定来解决这个问题吗？ （用户将触发新的选择，因此不会一次全部完成）

我也试过 $("select".on("change", "option", function() {alert("red");}); 但无济于事。任何帮助或解释都是赞赏。

这是在配置页面上，所以代码很长，有 800 行，所以我不想发布整个内容。

谢谢

** 编辑 **

动态生成的html最后是这样的：

  <select class="lowerSerialSelect" name="lowerSerial2" id="networklowerSerial2">
        <option></option>
        <option class="networkMacOption" id="networklowerSerial2"    value="0080A39166BA,192.168.1.59,47331,1363895658.22">0080A39166BA</option>
  </select>

Answer 1

没错，.change() 不是委托处理人。试试.on()

$('body').on('change', '.lowerSerialSelect', function() {
  // code here
});