javascript - 灯箱未加载动态选择器

Question

确实需要一些帮助:

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

现在，它在灯箱之外工作得很好，所以直接到 body 上，但一旦我将它放在灯箱内的表单中，它就会失败。

这是我的动态选择器脚本。

<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>

表格如下:

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


            <select class='city'>

            </select>

下面是它的实际演示:

Demo fiddle

所以主要问题是它在灯箱中不起作用，我显然错过了一些东西。

Answer 1

您需要将 JavaScript 移至一个函数，并在加载 Featherlight 后绑定(bind)它。

$(document)

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