JQuery Ajax returns all error and success messages that have been fired; with every request one more

Question

I'm new to ajax requests and was very happy I got it working. But there is still one problem remaining. The code shown down here, is a function to delete a building. If I delete one of the buildings I get the success message as an alert.

The Problem is: If I delete another building, it shows me that success message as an alert, followed by the first success message as another alert.

Why is this so? I don't know how to rewrite my code, so that it only shows the message which fits to the last deletion.

$('.removableBuilding').click(function(w) {
                   w.preventDefault();
                   var statusCode = $(this).data('status'); 

                   reference = $(this);

                   var felder = statusCode.split(';', 2);

                   var idOfBuild  = felder[0];
                   var nameOfBuild = felder[1];


                   $( ".nameToDelete" ).html(nameOfBuild);

                   $(".deleteBuildingConfirm").click(function(q){
                       $('.confirmDelete').modal('hide');

                       $.ajax({
                            type : 'POST',
                            url : '@routes.Admin.deleteBuilding()',
                            data : {
                                id: idOfBuild, name: nameOfBuild
                            },
                            success : function(data) {

                                alert(data);
                             /** Wenn ein gebäude kein Raum enthält würde es ohne die if-Abfrage
                              sonst das nächste Gebäude mitlöschen ! */
                              if( $( ".amountRooms" ).html() == "")
                                  reference.parent().parent().fadeOut();
                              else
                                  reference.parent().parent().fadeOut().next().fadeOut();

                            },
                             error : function(err) {

                            alert(err.responseText); 
                        }

                      });

                });


             });

I use a for loop for the html tags as I am using the play framework:

@for(building<-buildings){

<div class="row myStudies_ListView">
            <div class="col-sm-8 col-xs-6"><h4>@building.name</h4></div>
            <div class="col-sm-4 col-xs-6 text-right">
            <button class="btn btn-default addNewRoom"  data-status="@building.id" data-toggle="modal" data-target="#myRoomModal"><span class="glyphicon glyphicon-plus"></span> Raum</button>
            <button data-status="@building.id;@building.name;@building.description;@building.lat;@building.lng;" class="btn btn-default editableBuilding" data-toggle="modal" data-target="#editBuildingModal"> <span class="glyphicon glyphicon-pencil"></span></button>
      <button type="submit" data-status="@building.id;@building.name" data-toggle="modal" data-target="#confirmDelete" class="btn btn-danger removableBuilding" > <span class="glyphicon glyphicon-remove"></span></button>

      </div>

            </div>

<div class="amountRooms"></div>




}

This is my confirm modal:

<!-- Confirm Building Delete Modal -->
<div class="modal fade confirmDelete" id="confirmDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                Wollen Sie "<span class="nameToDelete"></span>" wirklich löschen?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button  class="btn btn-danger danger deleteBuildingConfirm">Delete</button>
            </div>
        </div>
    </div>
</div>

I need your help, Thanks in advance :)!

Answer 1

The problem is that you're adding click callback to $(".deleteBuildingConfirm") each time you click on $('.removableBuilding'). So no matter was deletion confirmed or not, you assigned new callback. Simply put your callback outside the $('.removableBuilding') callback, like this:

$('.removableBuilding').click(function() {
...
});
$(".deleteBuildingConfirm").click(function() {
...
});

See demo.