javascript - 语义用户界面 : Dynamically added dropdown menu doesn't change value in select

Question

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

这些项目的形式是一个下拉菜单，我需要监听它的更改。这对于页面加载时初始化的下拉菜单非常有效，但不适用于动态添加的下拉菜单。

为了隔离我的问题，我创建了这个 JSFiddle: https://jsfiddle.net/e7q1shyv/1/

语义 UI 下拉菜单似乎没有更新 <select> .

我尝试查看文档并进行搜索，但找不到任何相关信息。

感谢您提供解决此问题的任何想法!

Answer 1

此行有错误。

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

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

您的代码将更改为

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

工作 fiddle - https://jsfiddle.net/e7q1shyv/3/