javascript - 如何使用on('change')将事件监听器绑定(bind)到<script>运行后创建的元素？

我在搜索页面上使用了级联下拉功能。

当用户从下拉菜单中选择新元素时，将出现一个新的下拉菜单，依此类推。

我还有另一个功能可以填充下拉菜单，因此无需理会它们没有任何元素。

$(".search-cascading-dropdown").on("change", function() {
    $("#search-cascading-dropdown-container").append("<select class='search-cascading-dropdown'></select>");
});

一旦添加了新的选择框，就不会附加事件监听器。我如何才能使其正常工作，以便每次用户从下拉列表中选择一个条目时，它都会创建一个新列表？

最佳答案

使用jQuery的.on事件委托：

var $parent = $("#search-cascading-dropdown-container");
$parent.on("change", ".search-cascading-dropdown", function() {
  $parent.append("<select class='search-cascading-dropdown'></select>");
});

关于javascript - 如何使用on('change')将事件监听器绑定(bind)到<script>运行后创建的元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18723691/