Javascript JS事件未附加到加载后创建的元素

问题：在按钮单击上创建元素，然后将单击事件附加到新元素

我已经有过好几次这样的问题，我似乎总是能找到解决办法，但从来没有找到问题的根源。看看代码：

HTML:

以下是我已经尝试过的一些方法：

带有类项的标准Jquery单击元素 包括使用live和on方法 在元素创建后设置内联onclick事件 使用Bind方法绑定click事件处理程序的容器上的Jquery更改事件 警告：我无法创建另一个选择列表，因为我们正在使用MVC，从列表框中检索多个值时遇到问题。因此，MVC实际上与生成的隐藏元素相关联

在上使用$。而不是标准$。在这种情况下单击：

$("#container").on("click", ".item", function(){
  if ( $("#container span").hasClass("selected") ) {
    $(".selected").removeClass("selected");
  }
  $(this).addClass("selected");
});

在我看来，您希望在.item元素之间移动.selected类。如果是这样，我建议改为：

$("#container").on("click", ".item", function(){
  $(this)
    .addClass("selected")
    .siblings()
      .removeClass("selected");
});

另请注意，如果希望使用add ID绑定到元素，则$add应为$add。此部分也可以重新编写：

$("#add").click(function() {
  $("<span>", { html: $("select").val() })
    .addClass("item")
    .appendTo("#container");
});

$("#container").on("click", ".item", function(){
  $(this)
    .addClass("selected")
    .siblings()
      .removeClass("selected");
});

$("#add").click(function() {
  $("<span>", { html: $("select").val() })
    .addClass("item")
    .appendTo("#container");
});