Lightbox未加载动态选择器

Lightbox not loading dynamic selector

本文关键字：选择器 动态 加载 Lightbox      更新时间：2023-09-26

我真的需要一些帮助:

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

现在，它在灯箱外工作得很好，所以直接放在主体上，但一旦我把它放在灯箱内的形式中，它就失效了。

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

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

下面是它的演示:

演示小提琴

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

你需要将javascript移动到一个函数中，并在加载完你的featherlight后绑定它。

$(document)

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

相关文章：