Question

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

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

 $('#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/>')
 }});

因此，选定的下拉项目会显示在页面上，其中包含＆＃39; X＆＃39;在P标签旁边，带有＆＃34;可移动＆＃34;，生成。我已经在chrome中检查了这个，并且使用正确的类创建了p标签。

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

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

该项目无法删除，我无法在控制台中登录。知道为什么这不起作用吗？

编辑：

我已将我的代码修改为：

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

它确实删除了该项目，但该选项仍然被选中＆＃39;在下拉框中。我试图让它取消选择＆＃39;这也是。我正在使用Bootstrap和一个带有多个＆＃39;的下拉菜单。活性。虽然该选项当前已从输出中删除，但它不会从选择框中删除（这意味着当单击另一个选项时，它会重新呈现先前删除的元素。）

我以一种与重复问题不同的方式更清楚地问了这个问题（希望如此）： 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"); 
});

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

jQuery click事件不适用于p标记类

2 个答案: