jquery函数未调用新添加的ajax数据

Question

在这里，用户正在对消息添加评论。使用ajax调用在数据库中添加注释，然后将注释显示到jsp页面。

对于每个注释，都有一个删除按钮问题，即新添加的ajax注释没有调用delete jquery方法。如果我刷新页面，那么在它调用delete方法之后。

我希望新添加的ajax注释的delete方法可以在不刷新页面的情况下调用。

添加注释的ajax调用(正常工作，将数据添加到数据库并放入jsp页面)

$('.commentbox').on('keydown', function(event) {
        parentId=$(this).parent().attr("id");

        var idis='#'+parentId;
        var commentOn = $(idis).find('input[name="commentOn"]').val();
        var commentIs = $(idis).find('textarea[name="commentbox"]').val();
        var dataString1 = 'commentOn='+ commentOn
            +'&comment='+commentIs;
        $("#comment").val('');
        event.preventDefault();
        $.ajax({   
            type: "POST",   
            url: "addmessagecomment", 
            dataType: "text html",
            data: dataString1,   
            success: function(data) { 
                var divtoadd="#comments_"+commentOn;
                $(divtoadd).append(data); 
                $(idis).find('textarea[name="commentbox"]').val("");
            }     
        }); 
    }); 

用于删除评论(页面刷新后不调用新添加的ajax评论工作)

$('.deletecomment').click(function (f){

        var parentId=$(this).parents('.single_comment').attr('id');
        var todel=parentId.replace("comment_","");
        $.post('deletecomment?commentId='+todel, function(data) {
            $('#'+parentId).remove();

        });

    });

Answer 1

替换

$('.deletecomment').click(function (f){

使用

$(document).on('click','.deletecomment', function (f) {

。。因为第一个变种只将侦听器添加到加载初始DOM时存在的元素中。

http://api.jquery.com/on/

Answer 2

你可以做这样的事情。替换：

parentId=$(this).parent().attr("id");
var idis='#'+parentId;

通过以下方式：

parentId=$(this).parent();
var idis=$(parentId);

对于在AJAX之后添加内容时出现的问题，您需要委托函数。替换：

$('.deletecomment').click(function (f){

通过以下方式：

$('body').on('click', '.deletecomment', function (f) {

Answer 3

您需要将事件处理程序绑定到页面上已存在的内容；不绑定新添加的项。因此，将您的delete更改为如下所示：

$('body').on('click', '.deletecomment', function (f){
    // stuff...
});

主选择器应该是您确信不会被Ajax修改的最接近的元素-我使用'body'纯粹是因为我不知道您的标记。