javascript - 不能调用动态添加的类

Question

我正在尝试在通过 ajax 调用填充数据的页面中完成删除。我的页面在加载数据之前有这个：

<span id="ShowSelectedCategories"></span>

并在ajax调用后填写以下信息：

function(data){
    $('#ShowSelectedCategories').prepend('<a href="" id="'+b.SelectedCategoriesID+'" class="DeleteCat"> x <span style="color:red">' + data +'</span> </a>&nbsp ');
}

最后点击后我想删除点击的元素，但它不起作用。

$(function(){

    $("#ShowSelectedCategories").click(function(e){
    e.target.outerHTML //this is the part i want to remove after click

e.preventDefault();
    })

我已经尝试过$(".DeleteCat).click()，但这给出了错误，因为该类的元素是动态创建的。

感谢您的帮助

Answer 1

试试$(e.target).remove()，

$("#ShowSelectedCategories").click(function(e){
         $(e.target).remove();    
         e.preventDefault();
});

如果你想在 ID ShowSelectedCategories 的范围内删除类 DeleteCat 的元素，那么你可以这样做，

$("#ShowSelectedCategories").on("click", "DeleteCat" function(e){
         $(this).remove();    
         e.preventDefault();
});

Answer 2

$('#ShowSelectedCategories').on('click', '.DeleteCat', function(e){
    $(this).remove();
    e.preventDefault();
});

http://jsfiddle.net/Dj5NQ/

Answer 3

使用这样的东西来调用动态添加的类

$('.class').live("click", function(){

  $('#id').remove();   


});