我正在生成从下拉列表中选择的选项输出。 我想允许用户删除'从输出中选择。
我无法让我的代码工作,这是呈现输出的代码:
$('#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
答案 0 :(得分:1)
使用event delegation并请在该点击处理程序中使用$(this)
引用,如果您不使用它,那么点击单个元素会导致删除该类的所有元素
$("#dataOutput").on('click','.removeable',function(){
$(this).remove();
console.log("I did this");
});
并且还要注意,总是更喜欢最近的静态父级来委派事件
答案 1 :(得分:1)
由于您的段落已动态添加到DOM,因此点击事件将不适用于这些段落。在这种情况下, event delegation 会帮助您将该事件附加到这些动态生成的段落中:
事件委托允许我们将单个事件监听器附加到 父元素,将为匹配选择器的所有子项触发, 这些孩子现在是否存在,或将来是否存在。
$('#dataOutput').on('click', '.removeable', function() {
$(this).remove();
console.log("I did this");
});
此外,您可以使用点击处理程序中的.removeable
仅定位所点击的段落,而不是在点击removeable
类的任何段落时删除所有$(this)
。