jQuery单击事件不适用于p标签类[重复]

Question

我正在生成从下拉列表中选择的选项的输出。 我想允许用户从输出中“删除”选择。

我无法让我的代码工作，这里是呈现输出的代码：

 $('#dataCombo').change(function(){
 $('#dataOutput').html('');
 var values = $('#dataCombo').val();
 for(var i = 0; i < values.length; i += 1) {
 $('#dataOutput').append(values[i] + '<p class="removeable">X</p>'+'<br/>')
 }});

因此，选定的下拉项目显示在页面上，旁边有一个“X”，在 P 标记中，类为“可移动”，生成。我已经在 chrome 中检查了这个，并且 p 标签是用正确的类创建的。

我添加了此代码以删除单击的选项，但它不起作用：

$('.removeable').click(function(){
$('.removeable').remove();
console.log("I did this"); 
});

该项目没有被删除，我没有在控制台中获得日志。知道为什么这不起作用吗？

编辑：

我已将我的代码修改为：

$('#dataOutput').append('<p class="removeable">' + values[i] + 'X</p>'+'<br/>')

它确实删除了该项目，但是该选项在下拉框中仍处于“选中状态”。我也试图让它“取消选择”这个。我正在使用 Bootstrap 和激活“多个”的下拉菜单。虽然该选项当前已从输出中删除，但并未从选择框中删除（这意味着当单击另一个选项时，它会重新呈现先前删除的元素）。

我已经（希望）以与重复问题不同的方式更清楚地提出了这个问题： Unselect an option using jQuery on a Bootstrap selectpicker

Answer 1

使用 event delegation 并请在该点击处理程序中使用 $(this) 引用，如果您不使用它，那么在单击单个元素时会导致删除所有具有该类的元素

$("#dataOutput").on('click','.removeable',function(){
 $(this).remove();
 console.log("I did this"); 
});

还要注意，总是更喜欢最近的静态父级来委派事件

Answer 2

由于您的段落已被动态添加到 DOM，因此这些段落的点击事件将不可用。在这种情况下，event delegation 将帮助您将该事件附加到这些动态生成的段落中：

事件委托允许我们将单个事件侦听器附加到 父元素，将为匹配选择器的所有子元素触发， 这些孩子是现在存在还是将来添加。

$('#dataOutput').on('click', '.removeable', function() {
    $(this).remove();
    console.log("I did this"); 
});

此外，您可以在点击处理程序中使用$(this) 仅定位被点击的段落，而不是在点击任何具有removeable 类的段落时删除所有.removeable。