Question

I am working with JQuery and making a ajax call to delete some stuff form database based on ID like this:

$(".delete").live('click', function(event) {
                  var item = $(this),
                      commentContainer = item.parent(),
                      id = item.attr("id"),
                      string = 'solutionID=' + id;
                      item.next('.loading2').fadeIn();

                  $.ajax({
                    type: "POST",
                    url: "/js/ajax/delete-comment.php",
                    data: string,
                    cache: false,
                    success: function(){
                      commentContainer.slideUp('slow', function() {
                        item.remove();
                        $('.loading2').fadeOut();
                      });
                    }
                  });
                  event.preventDefault();
                });

The page itself has this:-

<a href="#" id="55" class="delete">DELETE</a><div class="loading2"></div>

It works the first time and I am using “live()” to make sure that it works after the ajax call too.
Nevertheless after the ajax call it seems to work but the ID of the element is not posted, although is there.

Anyone has an idea about this problem? Please

THANK YOU AVERYBODY. I FOUND THE PROBLEM:

It wasn’t Jquery or html related but a missed call in SQL query for solution.solutionID.
My apologies.

Answer 1

$(".delete").on('click', function(e) {
    var item = $(this);
    var commentContainer = item.parent();
    str = 'solutionID=' + this.id;
    item.next('.loading2').fadeIn();

    $.ajax({
        type: "POST",
        url: "/js/ajax/delete-comment.php",
        data: str,
        cache: false,
        success: function(){
            commentContainer.slideUp('slow', function() {
                item.remove();
                $('.loading2').fadeOut();
            });
        }
    });

    e.preventDefault();
});