Question

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

我已经多次遇到这个问题而且我似乎总是找到一个解决方法，但从来没有找到问题的根源。看看代码：

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方法绑定click事件处理程序的#Container上的Jquery更改事件

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

Answer 1

在这种情况下，使用$.on代替您的标准$.click：

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

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

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

另请注意，如果您希望使用“添加”ID绑定元素，则$("add")应为$("#add")。本节也可以重写：

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

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

1 个答案: