附加后Jquery删除元素

时间:2013-06-06 17:11:12

标签: javascript jquery

所以我只是想知道。为什么这样做:

$("input[name='edit-meta']").keyup(function(e){
    if(e.keyCode=='32'||e.keyCode=='13'){
        var clicked=$(this);
        var tag=$(this).val();
        clicked.siblings("#edit-meta").append('<span style="background:<?php echo $ad_details_arr[9]?>;color:<?php echo $ad_details_arr[8]?>" class="tag">'+tag.slice(0,-1)+'<a href="#" class="remove" style="background:<?php echo $ad_details_arr[10]?>;color:<?php echo $ad_details_arr[8]?>;margin:5px">x</a></span>');
        clicked.val("");
    }
    $("a.remove").on("click",function(e){
        e.preventDefault();
        var clicked=$(this);
        clicked.closest("span.tag").fadeOut(function(){
            $(this).remove();
        });
    });
});

而不是这个:

$("input[name='edit-meta']").keyup(function(e){
    if(e.keyCode=='32'||e.keyCode=='13'){
        var clicked=$(this);
        var tag=$(this).val();
        clicked.siblings("#edit-meta").append('<span style="background:<?php echo $ad_details_arr[9]?>;color:<?php echo $ad_details_arr[8]?>" class="tag">'+tag.slice(0,-1)+'<a href="#" class="remove" style="background:<?php echo $ad_details_arr[10]?>;color:<?php echo $ad_details_arr[8]?>;margin:5px">x</a></span>');
        clicked.val("");
    }
});
$("a.remove").on("click",function(e){
    e.preventDefault();
    var clicked=$(this);
    clicked.closest("span.tag").fadeOut(function(){
        $(this).remove();
    });
});

我认为.on足以让我执行像.live那样创建的处理程序。

在jquery .on页面中也有说明。

” ...处理尚未创建的后代元素上的事件的能力 “

1 个答案:

答案 0 :(得分:5)

您可以使用: -

$(document).on("click" , "a.remove" ,function(e){
    e.preventDefault();
    var clicked=$(this);
    clicked.closest("span.tag").fadeOut(function(){
        $(this).remove();
    });
});

上述内容不起作用,因为DOM中没有a.remove。

第一个示例有效,因为在将事件添加到DOM后将事件附加到a.remove。