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>
答案 0 :(得分:2)
事件委托 - 当元素动态添加到DOM
时更改
$("span.bu_delpost").click(function()
到
$(document).on('click', 'span.bu_delpost', function()
这会将事件附加到文档上,并在事件冒泡时处理。
为了提高性能,最好将document
替换为staticParent container
。
答案 1 :(得分:1)
for 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
});