Javascript Lightbox未加载动态选择器

在这方面需要一些帮助：

所以我用的是一个叫做featherlight的灯箱。我在那里有一个表单，表单有几个输入字段，但我需要帮助的两个字段是国家选择，因此您可以选择美国或英国，无论您选择哪一个，下一个选项列表都会相应更改

现在，它在灯箱外非常好地工作，直接作用在身体上，但一旦我把它放在灯箱内，它就失败了

这是我的动态选择器脚本

<script>

var ukCities = ['Avon', 'Bedfordshire', 'Berkshire'];
var usCities = ['Alabama', 'Alaska', 'Arizona'];

$(document).on("change", "select.country", function() {
    var country = $("select.country").val();
    var cities;
    if(country === 'UK'){
        cities = ukCities;
    }
    else{
        cities = usCities;
    }
    $("select.city").empty();
    $.each(cities, function(index, element){
            $("select.city").append($("<option></option>").attr("value", country).text(element));
    });
});
$("select.country").val('UK').trigger('change');

</script>

var ukCities=['Avon'，'Bedfordshire'，'Berkshire']；
var usCities=['阿拉巴马州'、'阿拉斯加州'、'亚利桑那州']；
$（文档）.on（“更改”，“选择.country”，函数（）{
var country=$（“select.country”）.val（）；
var城市；
如果（国家==‘英国’）{
城市=英国城市；
}
否则{
城市=城市；
}
$（“select.city”）.empty（）；
$.each（城市、功能（索引、元素）{
$（“select.city”）.append（$（“”）.attr（“value”，country.text（元素））；
});
});
$（“select.country”）.val（'UK'）.trigger（'change'）；

表格如下：

 <select style="width: 64%;" name="country" class="country">
            <option value="UK">UK</option>
            <option value="US">US</option>
            </select>


            <select class='city'>

            </select>

英国
美国

下面是一个正在运行的演示：

---

因此，主要问题是它在lightbox中无法工作，我显然遗漏了一些东西。

您需要将javascript移动到一个函数，并在加载featherlight后绑定它

$(document)

---

这意味着您的脚本将应用于页面加载时的DOM元素。如果featherlight在加载DOM后加载您的选择菜单，那么您需要手动将javascript代码绑定到新元素。

有人可以给我一个指针吗？我真的需要一些帮助：（我对你的意思有点困惑，你有一个例子吗？featherlight是否在页面加载后加载选择菜单？通过ajax？