Javascript事件似乎不適用於新創建的元素

Question

var post = '<img class="img_proids" src="image/thumbnail/' + usr_data[2] + '"/><div class="div_postcontent"><ul class="ul_postcontent">'; 
post = post + '<li><a class="a_unames" href="#" usr_data[1] + '</a>'; 
post = post + '<span class="bu_delpost">Delete this post<input type="hidden" value="'+ result[1] + '"/></span></li></ul></div><div class="float_clear"></div><br><hr><br>'; 
p_type.after(post); // append the post here using jquery 

我所做的是，當用戶發佈一些數據時，我不希望整個頁面刷新。所以我已經發送數據到服務器使用ajax請求和還使用jquery將帖子內容附加到頁面。但事件

$("span.bu_delpost").click(function(){ // see 3rd line, span class='bu_delpost' 

    var d_postid = $(this).find("input").val(); 
    var p_type = $("#inp_type").val(); 

    $.post("ajax/ajx_dpost.php",{d_post:d_postid,type:p_type},function(result){ 
       alert(result)     
}); 

}); 

似乎不適用於附加帖子，但它似乎適用於從數據庫開始加載的帖子。

爲什麼此事件不適用於新添加的span元素？但CSS屬性似乎適用於這個新添加的元素，但不是javascript事件。

任何人都可以幫助我。謝謝。任何幫助是極大的讚賞。

注意的JavaScript事件都寫在jquery.posts.js文件，包括使用<script src="jquery/jquery.posts.js"></script>

Answer 1

事件代表團的文件 - 由於元素動態添加到DOM

變化

$("span.bu_delpost").click(function() 

到

$(document).on('click', 'span.bu_delpost', function() 

這會將事件附加到文檔上，並在事件出現時處理它。

總是比較好的想法，爲了性能，用staticParent container替換document。

Answer 2

的jQuery 1.8+

$(document).on('click', 'span.bu_delpost', function(e){ // see 3rd line, span class='bu_delpost' 

     var d_postid = $(this).find("input").val(); 
     var p_type = $("#inp_type").val(); 

     $.post("ajax/ajx_dpost.php",{d_post:d_postid,type:p_type},function(result){ 
        alert(result)     
    }); 

    }); 

如果使用之前版本，您可以使用

$("span.bu_delpost").live('click', function(){ 
//here goes your code 
});