1

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

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

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 单击“项目”类的元素
  • 包括使用 live() 和 on() 方法
  • 在元素创建后设置内联 onclick 事件
  • #Container 上使用 Bind 方法绑定单击事件处理程序的 Jquery 更改事件

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

4

1 回答 1

2

在这种情况下使用$.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");
});
于 2012-05-04T02:28:13.207 回答