javascript - 与 JavaScript 生成的 HTML 交互

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 9 年前。

使用 javascript，我从 JSON 文件中获取数据并将其放入 HTML 选择元素中。 JSON 文件中的每个项目都位于 select 内的不同选项元素中。

我现在希望能够在 HTML 输入元素中显示用户选择的选项。我认为使用以下代码可以实现这一点:

<script>
$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .trigger( "change" );
</script>

我认为我的问题是从 javascript 生成的 HTML 无法识别。有什么办法可以让我完成这项工作吗？

谢谢

Answer 1

是的，如果您要动态生成选择，则需要进行事件委托(delegate)。

更改:

$( "select" ).change(...

致:

$(closestParent).on("change", "select", function()...

“closestParent”是选择中最接近的元素，它不是动态生成的(您甚至可以使用“body”并且它会起作用)