javascript - JQuery获取Select中动态生成的Option的值

Question

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

我尝试在 document.ready 内部使用 .change 绑定(bind)器，但这不起作用，我想这可能是因为不存在可供绑定(bind)的元素。 .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 不会绑定(bind)到尚未创建的元素吗？

如果是这样，我可以通过每次创建新选择时重新绑定(bind)来解决这个问题吗？ (用户将触发新的选择，因此不会立即完成所有操作)

我也尝试过 $("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() 不是委托(delegate)处理程序。尝试 .on()

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