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

JS Events not attaching to elements created after load

本文关键字：元素 JS 事件 创建 加载      更新时间：2023-09-26

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

我已经多次遇到此问题，我似乎总是找到解决方法，但从未找到问题的根源。看看代码：

.HTML： 

<select>
  <option>567</option>
  <option>789</option>
</select>
<input id="Add" value="Add" type="button">    <input id="remove" value="Remove" type="button">   
<div id="container">
  <span class="item">123</span>
  <br/>
  <span class="item">456</span>
  <br/>
</div>

JavaScript

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

$("add").click(function() {
   //Finds Selected option from the Select
   var newSpan = document.createElement("SPAN");
    newSpan.innerHTML = choice;//Value from Option
    newSpan.className = "item";
    var divList = $("#container");
    divList.appendChild(newSpan);//I've tried using Jquery's Add method with no success
   //Deletes the selected option from the select
})

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

  • 标准jQuery点击具有类"item"的元素
    • 包括使用 'live（）'
  • 和 'on（）' 方法
  • 在创建元素后设置内联"onclick"事件
  • 使用 Bind 方法绑定点击事件处理程序的"#Container"上的 jQuery 更改事件

警告：我无法创建另一个选择列表，因为我们使用的是 MVC，并且在从列表框中检索多个值时遇到问题。因此，生成的隐藏元素实际上与MVC相关联。

在这种情况下，

请使用$.on而不是标准$.click：

$("#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");
});
相关文章：