CODEWITHSUNDEEP
jquery
user2302288
user2302288

Reputation: 305

jquery function is not calling for new added ajax data

Here user is adding comment on a message. ajax call is used to add comment in database then comment is displayed to jsp page.

For each comment there is a delete button problem is that new added ajax comment is not calling the delete jquery method. If I refresh the page then after it is calling the delete method.

I want that newly added ajax comment's delete method should call without page refresh.

ajax call to add comment (working properly adding data to DB and shoing in jsp page)

$('.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("");
            }     
        }); 
    });

for deleting the comment( not calling on new added ajax comment work after page refresh)

$('.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();

        });

    });

Upvotes: 0

Views: 143

Answers (4)

redDevil
redDevil

Reputation: 1919

you mean that only a newly added comment div's delete button is not working right?

For that you will have to use live or on function 

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

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

        });

});

just click does not work for dynamically added elements,

see jquery on function for more details

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21201

You need to bind the event handler to something that already exists on the page; newly-added items are not bound. So, change your delete to something like:

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

The primary selector should be the closest element you are sure will not be modified by Ajax - I used 'body' purely because I do not know your markup.

Upvotes: 0

Kaloyan
Kaloyan

Reputation: 7352

Replace

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

with

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

.. since the first variant adds the listener only to elements that exist when the initial DOM is loaded.

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

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You can do something like this. Replace:

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

With:

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

And for the issue arising when things are added after AJAX, you need to delegate the functions. Replace:

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

With:

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

Upvotes: 0

Related Questions