Javascript 语义界面：动态添加下拉菜单'；不要更改选择中的值

在使用语义UI框架时，我正在开发一个可以动态添加多个项的表单

在这些项目的形式是一个下拉菜单，我需要听的变化。这适用于加载页面时初始化的下拉列表，但不适用于动态添加的下拉列表

为了隔离我的问题，我创建了以下JSFIDLE：

语义UI下拉菜单似乎没有更新

我试着查找文档并四处搜索，但找不到任何与此相关的内容

感谢您对解决此问题的任何想法

检查工作代码

$（文档）.ready（函数（）{
$（'select'）.dropdown（）；
});
$（文档）.on（'change'，'select'，function（）{
var valu=$（this.val（）；
$（'span'）.html（值）；
});
$（“按钮”）。单击（函数（）{
$（'select'）.first（）.clone（）.appendTo（'.select'））
$（'select'）.dropdown（）；
});
.ui.button{
边缘顶部：50px；
}

选择1
选择2
添加选择
值已更改：
正在检查工作代码


$（文档）.ready（函数（）{
$（'select'）.dropdown（）；
});
$（文档）.on（'change'，'select'，function（）{
var valu=$（this.val（）；
$（'span'）.html（值）；
});
$（“按钮”）。单击（函数（）{
$（'select'）.first（）.clone（）.appendTo（'.select'））
$（'select'）.dropdown（）；
});
.ui.button{
边缘顶部：50px；
}

选择1
选择2
添加选择
值已更改：
只需更改
$（'select'）
的
$（此）
，如下所示，它工作正常：

$(document).on('change', 'select', function(){
    $('span').html($(this).val())
});

只需将
$（'select'）
更改为
$（此）
，如下所示，即可完美运行：

$(document).on('change', 'select', function(){
    $('span').html($(this).val())
});

这行有一个错误

$(document).on('change', 'select', function(){
    $('span').html($('select').val())
});

这里您使用的是“select”值，它将始终对应于selects类中的第一个select元素。将其更改为$this以获取当前实例值

您的代码将更改为

$(document).on('change', 'select', function(){
    $('span').html($(this).val())
});

工作小提琴-
您在这行有一个错误

$(document).on('change', 'select', function(){
    $('span').html($('select').val())
});

这里您使用的是“select”值，它将始终对应于selects类中的第一个select元素。将其更改为$this以获取当前实例值

您的代码将更改为

$(document).on('change', 'select', function(){
    $('span').html($(this).val())
});

工作小提琴-
它在我的身边工作着没有@MuhammadIrfan它不工作了。。。。再查一遍。。单击添加后，选择。然后检查第二个下拉更改它在我的sideHi查看更新的小提琴更改$（'select'）.val（）到$（this）.val（）它在我的sideNo@MuhammadIrfan上工作它不工作。。。。再查一遍。。单击添加后，选择。然后检查第二个下拉更改它在我的sideHi看到更新的小提琴将$（'select'）.val（）更改为$（this）.val（）啊！令人尴尬的奇怪的是，在我的实际代码中，它根本没有注册变更事件。回到兔子的踪迹里，我想。：）哈哈。有时会发生。你一直在寻找一些大错误，而实际上这是一个非常小的错误：）如果你对有关技术的讨论感兴趣，你可以在Slack上加入我。啊！令人尴尬的奇怪的是，在我的实际代码中，它根本没有注册变更事件。回到兔子的踪迹里，我想。：）哈哈。有时会发生。你一直在寻找一些大错误，而实际上这是一个非常小的错误：）如果你对与技术相关的讨论感兴趣，你可以在Slack上加入我。