JQuery添加后隐藏

Question

我正在运行一个脚本，当从下拉列表中选择一个元素时，它会添加一个元素，这一部分都正常工作并附加了该项。添加的项目包括一个按钮，点击后隐藏添加的项目。但是，我似乎无法使隐藏函数起作用。如果我手动将元素放入HTML中并单击隐藏按钮，则代码似乎可以正常工作，但是由于某种原因，在附加它时它不起作用？

$('#addteammember').click(function() {
 var usernamevalue = $("#teammemberselected").val();
 var teammemberfullname = $('#teammemberselected option:selected').text();
  $('#teammemberlist').append("<li><input class='removeteam' type='button' value="+usernamevalue+" /><span class='listitem'>"+teammemberfullname+"</span></li>");
});


$('.removeteam').click(function () {
  $(this).hide();
});   

- rmaspero

Answer 1

这是因为您动态添加了按钮，但仅绑定了现有元素的click处理程序。您可以改用以下代码：

$("#teammemberlist").on("click", ".removeteam", function () {
    $(this).hide();
}); 

- VisioN

---

请注意，on方法是在jQuery 1.7版本中引入的。如果由于某种原因您必须使用旧版本，请尝试使用live或delegate。出于性能原因，我建议使用delegate而不是live。我不确定on与这两种方法相比如何。 - lbstr

Answer 2

尝试使用live函数。

$(".removeteam").live("click", function() {
$(this).hide();
});

- 4b0